Using jQuery 'click' function that was loaded with Ajax content?

Question

I have the contents of a php file loaded via Ajax that contains HTML and JavaScript. I have a button:

<button class="search_button">Search</button>

And I have a script underneath that will update the documents hash from a jQuery function

<script type="text/javascript">
  $(".search_button").click(function() {
    var searchTerm = $('#search_box').val();         
    document.location.hash="searchTerm";
    return false;
  });
</script>

This code works when I run the php file separately, but when loading this page from an Ajax call, the function no longer runs. In firebug the script is not present so I am assuming I cannot load a script in using this method. I tried also putting the JavaScript snippet instead a header for the whole website, but this failed also.

I was also thinking perhaps the function has to be declared when there is a search_button class already present, but it was structured in this way when I previously had them in one file (that was retrieved via Ajax) to no avail so I'm confused as to the problem.

score 7 · Answer 1 · answered Dec 18 '12 at 07:05

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Example usage of .on() to bind click event

$(document).on("click", "#post a", function(){
    alert("1");
})

score 7 · Accepted Answer · answered Jan 21 '11 at 16:21

You can include it globally with a live event:

  $(".search_button").live('click', function() {
    var searchTerm = $('#search_box').val();         
    document.location.hash="searchTerm";
    return false;
  });

jQuery will automatically evaluate script blocks, you cannot see the function in the HTML because it has been stripped out. However it should have already run. The problem is most likely timing. You could do something like

setTimeout(function(){  
    $(".search_button").click(function() {
        var searchTerm = $('#search_box').val();         
        document.location.hash="searchTerm";
        return false;
    });
}, 500);

So that when the script is loaded it waits to be executed (hopefully giving jquery time to update the DOM with the new element).

This is it. You need to use .live('click', function(){}); for the event to catch on new data inserted into the DOM. Headache for everyone not familiar. — David Houde, Jan 21 '11 at 16:30

score 1 · Answer 3 · answered Jan 21 '11 at 16:30

Try to add the script inside a function


function name(){
  $(".search_button").click(function() {
    var searchTerm = $('#search_box').val();         
    document.location.hash="searchTerm";
    return false;
  });
}

and call this function just after the end of the ajax call.


$(document).ready(function() {
 name();
});

Using jQuery 'click' function that was loaded with Ajax content?

3 Answers3

Linked