Question

I have a navigation bar which consists of php-generated html as follows:

<ul>
<div class="container"><button type="button" name="1" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Home">Home</a>
<div class="container"><button type="button" name="2" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Events">Events</a>
<div class="container"><button type="button" name="3" class="delButton" alt="Delete"></button></div>
<a href="/" alt="Calendar">Calendar</a>
<div class="container"><button type="button" name="4" class="delButton" alt="Delete"></button></div>
<a href="/" alt="About Us">About Us</a>
</ul>

Each set consists of a delete button and a link. The name attribute of the button contains the unique id of the link following it, as per the mySQL database.

I’m using the following jQuery code to remove the link when its corresponding delete button is clicked. Note that I’m using a custom ajax() method, and not jQuery’s ajax method.

$('.container button').click(function() {
     if (confirm('Are you sure you wish to remove this link?'))
        ajax('POST', '/deletelink.php', 'id='+this.name, function(xmlhttp) {
           $('.nav ul').load('/getnav.php');
        });
});

The above code works as expected when I click any one of the delete buttons, and it removes the corresponding link. However, if after deleting one link I try clicking on another delete button, nothing happens. The confirm() alert box doesn’t even show up. This suggests that the click() function is not being entered for the second delete attempt.

My interpretation of this is that once the function executes the first time, it resolves the selector to that specific button that was clicked; meaning that subsequently clicking on a different ‘.container button’ is going to have no effect in terms of this function.

Is my assessment correct? If so, is there any way to prevent the function from resolving the selector to the specific object? If not, are there any alternatives that allow me to use one function for all of the delete buttons I have setup now?

Answer 1

Your click handlers are overwritten when you load the getnav.php again. You can use the following construct:

$(document).on('click', '.container button', function() {
    // click handler code here
}

You should be able to narrow down the selectors as well:

$('.nav ul').on('click', '.container button', function() {
    // click handler code here
}

This binds the click handler on the <ul> itself and then uses the .container button selector to determine where to “send” the click event to.

See also: .on()