Event is not tied to element

13

I have an event in jQuery (version 1.5) as follows:

 $('#refresh_abertos').click(function(){
      // aqui o código irrelevante nesta pergunta     
 });

It turns out that my #refresh_abertos element is only loaded later via ajax , and .click() does not get tied to it, how can I fix it?

    
asked by anonymous 21.01.2014 / 14:25

5 answers

13

Problem

By the time your code is being read, your element does not exist on the page, so the attachment of the click event does not occur.

Solution

As an alternative to the already suggested, if you want to attach an event of click to an element that does not yet exist, you can attach it to an element that is parent , as is the case of body or a wrapper that is present on the page in the initial load of the same.

Practical Example

JSFiddle Example

In the example I used setTimeout to simulate the insertion of an element in the DOM a bit after reading the page.

I do not know your markup , so here's an example assuming your #refresh_abertos element will be placed within a div that contains the #myWrapper :

$('#myWrapper').on("click", "#refresh_abertos", function() {
    alert("bubu");
});

What we are doing here is to attach the event of click to div#myWrapper to be triggered when it has effect on #refresh_abertos element.

So you have the click in a parent element that will take effect when you click on the element that will be introduced.

The solution presented makes use of jQuery .on () available from version 1.7.

    
21.01.2014 / 15:02
7

The best solution I see is to delegate the click via document (or a relative that has been present since the page loaded).

So you can use:

 $(document).on('click','#refresh_abertos',function(){
      // aqui o código irrelevante nesta pergunta     
 });

Using .on () you can have the handler applied to document (a secure letter, as I said it could be another relative), but delegated to #refresh_abertos

For versions prior to jQuery 1.7 you can use .delegate () instead of .on()

    
21.01.2014 / 15:04
6

Assuming you are using a function such as jQuery.load () . Add the code in the callback of the event, that is, a function that jQuery performs to complete both the request and the update of the DOM.

See an example:

$("#local_carregamento").load("ajax/pagina.html", function() {

   $('#refresh_abertos').click(function(){
      // aqui o código irrelevante nesta pergunta   
   });

});

And another example using the jQuery.ajax() function:

$.ajax("example.php")
  .done(function() {
     $('#refresh_abertos').click(function(){
        // aqui o código irrelevante nesta pergunta   
     });
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

Note that, according to the documentation, callbacks success , error , and complete are deprecated from version 1.8.     

21.01.2014 / 14:39
6

You can use the .live method (in newer versions of jQuery, .on ):

$("#refresh_abertos").live("click", function() { ... });

Example in jsFiddle . Citing the documentation of live (emphasis mine):

  

Places an event handler for all elements that match the selector used, now and in the future .

Note: The live method is deprecated from the 1.7 version, on being the preferred way:

$("body").on("click", "#refresh_abertos", function() { ... });

Example . The advantage of on is that it places the handler not in the element itself, but in some ancestral element (in this example I chose body , but could be another more restricted), and it reacts to events in any descending element that passes in the chosen filter (the second argument, a selector). Thus, elements added afterwards are also contemplated, and without an excessive cost of performance ( live , if I'm not mistaken, you need to double-check the selector whenever an element is added to the DOM anywhere on the page.)

    
21.01.2014 / 15:03
5

The simplest and obvious solution I can think of right now is to bind after loading the element via AJAX. Look in the API of the method you are using to make the request, bind in success that should work.

    
21.01.2014 / 14:34