jQuery单击事件不会在“已加载”的HTML上触发

Question

I'm trying to understand why loading HTML into a div block renders its class statement effectively non-existent to a click event.

My HTML code looks like this:

<div id="load-to"></div> 

<div id="load-from">
    <div class="load-from-css"> Hello!</div> 
</div>

<button>load it!</button>

My JS code looks like this:

$('button').click(function(){
    var html = $('#load-from').html();
    $('#load-to').html(html);
});

$('.load-from-css').click(function(){
    alert('clicked');
});

When I click the button the HTML from the lower div block is loaded into the upper div block, and then the HTML looks like this:

<div id="load-to">
    <div class="load-from-css"> Hello!</div>
</div> 

<div id="load-from">
    <div class="load-from-css"> Hello!</div>
</div>

My question is, why does the second click event (defined in my jQuery code) only work on the original lower "Hello!" div block but not on the loaded upper one, when both have the same class definition?

Answer 1

Other answers have already covered the core reason for your problem (that copying the HTML of an element and placing it elsewhere will create a brand new DOM element and does not copy any events that were bound to the original element... keeping in mind that when you add an event listener, it will only bind to any elements that exist at the time that you do so)

However, I wanted to add some other options for accomplishing what you want to do.

jQuery has a few different techniques that make this sort of thing easy:

.clone() will essentially do the same thing as you are doing now*, it will copy the HTML content and create a new DOM element. However, if you pass true (ie: .clone(true) ), it will clone it with all data and events intact.

* note that to truly get the same result as using .html() , you need to do .children().clone() , otherwise you'll get both the inner and outer div .. this may or may not be necessary depending on the use case

ex: https://jsfiddle.net/Lx0973gc/1/

Additionally, if you were in this same situation but did not want to make a clone, and simply wanted to move an element from one place to another, there is another method called .detach() which will remove the element from the DOM, but keep all data and events, allowing you to re-insert it later, in the same state.

ex: https://jsfiddle.net/Lx0973gc/2/ (not the best example because you won't see it move anywhere, but it's doing it!)

As another alternative, you can use delegated event binding, which actually binds the event to a different element (a parent) which you know won't change, but still allows you to target a child element within it:

$('body').on({
    'click': function() {
    alert('clicked');
  }
}, '.load-from-css');

ex: https://jsfiddle.net/Lx0973gc/4/

Answer 2

The $('.load-from-css') finds all elements currently existing and .click(...) attaches a listener to all these elements. This is executed once.

Then you copy the raw html which does not transfer any listeners. The DOM has nodes onto which the listeners are attached but when you copy the plain HTML you essentially create new nodes based on the html.

Answer 3

Because you are copying just the HTML. The js file is loaded at the beginning, when there is just one instance of a div with the "load-from-css" class. You should execute again the code adding the listener after you copy the html. Somethinglike:

 $('button').click(function(){
    var html = $('#load-from').html();
    $('#load-to').html(html);

    $('.load-from-css').click(function(){
        alert('clicked');
    });

 });

Answer 4

#load-to inner HTML is initially empty. so added click listener only for #load-from .load-from-css . Dynamically bind element will not attach the click listener.

jQuery new version have the feature to attach the event for dynamic elements also. Try this

$('button').click(function(){
        var html = $('#load-from').html();
        $('#load-to').html(html);
    });

    $(document).on('click', '.load-from-css', function(){
        alert('clicked');
    });

Also we can use like this

$( document ).delegate( "load-from-css", "click", function() {
  alert( "Clicked!" ); // jQuery 1.4.3+
});

Answer 5

Simply because the page did not refresh. You loaded a content to another content without loading the page, and the browser wont recognized any event added to the loaded element.

What you should do is load your javascript tag with the load along with the content.

Your code should be like this:

   <div id="load-to">
    <div class="load-from-css"> Hello!</div>
</div> 

<div id="load-from">
    <div class="load-from-css"> Hello!</div>
   <script>$('button').click(function(){
        var html = $('#load-from').html();
        $('#load-to').html(html);
    });

    $('.load-from-css').click(function(){
        alert('clicked');
    });</script>
</div>