Apply jquery functions to loaded elements

问题

I'm trying to apply functions on loaded element, I search the web but i don't understand what to do.

Can anyone tell me what to do?

Example:

 <script>
 // checkbox cheque
$("#cheque").click( function () {
        if($("#cheque").is(":checked"))
        {
            //alert('Cheque is checked');
            $("#load_cheque").load("./server/mode_paiement.php?cheque=1");
        }
        else
        {
            //alert('Unchecked Cheque!!');  
            $("#load_cheque").empty();  
        }
    });
  </script>

And this is the element to load:

<label for=" echeance " class="form-label size-120 fl-space2">Echéance: <span class="required">*</span></label> 
<input type="text" id="echeance" class="required text fl-space2 datepicker-inline" name="echeance"  /> 

as you notice there is "datepicker-inline" .. the probleme is that datepicker is not working on the loaded input

Thanks :)

回答1:

You should use 'live' when binding your datepicker, like this:

$('.datepicker-inline').live('click', function() {
        $(this).datepicker({showOn:'focus'}).focus();
});

(shamelessly lifted from this other question)

Otherwise, your datepicker-binding code will not see the new elements to convert to datepickers (they did not exist when it first ran), and you get your current behaviour.

回答2:

You can put a callback in the load call, which will be called when the new content has been added:

$("#load_cheque").load("./server/mode_paiement.php?cheque=1", function(){
  // Here you can fix the loaded content
});

来源：https://stackoverflow.com/questions/6186483/apply-jquery-functions-to-loaded-elements