Call function inside document.ready wont work

Question

I want to be able to call a function from a link (this function will delete the corresponding row). If I place the function inside document ready it wont load upon call. But it works while outside. The function is delRow(id) located at the end of .

I tried making a 'copy' of "$("#participants").click(function() {" and calling it just like the "Lägg till deltagare" link (add user link).

How do I solve this in the best way? And Why cant you call functions inside document.ready and why wont my copy of the participants click.function work? (I dont have it in the code example, i named it like "$("#deleterow").click(function() and set the id of the button to deleterow)

URL: http://min.xn--spyp-toa.se/addrows.php (Some DNS servers have problem with this, run googles DNS instead! 8.8.8.8 )



    

    

    
    

    
    Lägg till deltagare

    
    Deltagare:

T.J. Crowder · Accepted Answer

When you use old-style DOM0 handler hookup (onclick="..."), any functions you reference in that string must be globals. Your delRow function isn't a global, it's contained by the function you're passing into ready — which is a good thing, the global namespace is already too full.

Two choices for dealing with this:

1. Hook things up with jQuery

The best way (in my view) to deal with it is to hook up your button using jQuery from within your ready function. E.g.:

$("#delete_participants").click(delRow);

2. Export just that function

Alternatively, you could make a global that points to delRow by doing this within the ready function:

window.delRow = delRow;

That works because all global variables are properties of the window object in browsers, so by assigning a reference to delRow to the delRow property on window, you're explicitly making it available in the global namespace (without cluttering up the global namespace with any of your other functions). Then the onclick="..." handler will be able to see it. But I wouldn't advocate using globals if you can avoid it. It's a useful bridging technique, though, as you transition from the old style to the newer style.

Side note: You don't have to use the ready function, you can just put your script at the bottom of the page (just before or after the ending tag) and do this:

(function() {
    // Your code here
})();

It will run slightly sooner, and still have access to all of the DOM elements on the page (ref | ref). But ready is mostly fine too.

Re your comment below:

I´ve given dynamic buttons the ID "delete_participants" and created the $("#delete_participants").click(delRow); but it aint getting called. It works for the static button tho.

That's because you can't have more than one element on a page with the same id. The id values must be unique.

If you're going to be adding and removing rows, and if you're using jQuery to hook things up, you have two additional choices:

A. Hook Them Up Individually

This is just a matter of calling click(function() { ... }) on the new button once you've created it, e.g.:

var tr = '';
tr.find('input').click(delRow);
tr.appendTo(/* ...presumably a table body or something...*/);

So for instance, here's a complete example:

HTML:

JavaScript:

jQuery(function($) {

  $("#participants")
    .delegate('input[name="add"]', "click", addParticipant)
    .delegate('input[name="delete"]', "click", delParticipant);

  function addParticipant() {
    var td, tr, name;

    // Obviously you'd use something more modern than `prompt`
    name = prompt("Name for new participant: ", "");
    if (name) {
      // And this code is no thing of beauty, either, but you get the idea
      td = $('').text(name);
      tr = $('');
      tr.append(td);
      tr.append('');
      tr.hide();
      $("#participants tbody").append(tr);
      tr.fadeIn();
      // Note we don't have to do anything to hook the new button;
      // delegation handles that
    }
  }

  function delParticipant() {
    var tr = $(this).closest('tr');
    tr.fadeOut(function() {
      tr.remove();
    });
  }

});

Live copy

B. Use Event Delegation

But in cases like this, another technique is frequently better: Event delegation. In event delegation, you hook the event ("click") on some container of all of the things that might receive that click, and then when the click happens check to see if the event has passed through any of the relevant elements (because most events, including "click", "bubble" from the element on which the click actually occurred up to its parent, grandparent, and other ancestors). jQuery makes delegation dead easy, using delegate:

$("selector_for_container").delegate("selector_for_element", "click", function() {
    // This will get called if the click matches the element selector
});

or, as of 1.7 or later, using one of the several variants of on:

$("selector_for_container").on("click", "selector_for_element", function() {
    // This will get called if the click matches the element selector
});

(Note that the order of arguments is slightly different.)

Complete example (using delegate, since a lot of people aren't on 1.7 yet):