javascript - jQuery: target element added with .html() or .append() - Stack Overflow

admin管理员组

文章数量:1289876

When I add an element in the DOM using .html(), .append() or .appendTo(), I then don't manage to target the added element.

HTML

<div>
    <em class="button" id="old">old button</em>
</div>

jQuery

var newButton = '<em class="button" id="new">new button</em>'
var oldButton = '<em class="button" id="old">old button</em>'

$('#old').click(function(){
    $('div').html(newButton);
});

$('#new').click(function(){
    $('div').html(oldButton);
});

The latter code replaces the original <em class="button" id="old">old button</em> with <em class="button" id="new">new button</em>, but then I don't manage to target the newly added #new with jQuery.

I could not find an explanation on the .html() API Documentation, any idea?

Here's a JSFiddle you can update.

When I add an element in the DOM using .html(), .append() or .appendTo(), I then don't manage to target the added element.

HTML

<div>
    <em class="button" id="old">old button</em>
</div>

jQuery

var newButton = '<em class="button" id="new">new button</em>'
var oldButton = '<em class="button" id="old">old button</em>'

$('#old').click(function(){
    $('div').html(newButton);
});

$('#new').click(function(){
    $('div').html(oldButton);
});

The latter code replaces the original <em class="button" id="old">old button</em> with <em class="button" id="new">new button</em>, but then I don't manage to target the newly added #new with jQuery.

I could not find an explanation on the .html() API Documentation, any idea?

Here's a JSFiddle you can update.

• javascript
• jquery
• html
• dom

Share Improve this question Follow asked Sep 22, 2015 at 13:05 RaoulitoRaoulito 36122 silver badges1111 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

You need to use event delegation on dynamically added/changed elements.

var oldButton = '<em class="button" id="old">old button</em>'
var newButton = '<em class="button" id="new">new button</em>'
$(document).on('click', '#old', function(){
    $(this).closest('div').html(newButton);
});
$(document).on('click', '#new', function(){
    $(this).closest('div').html(oldButton);
});

.button {
    display:inline-block;
    padding: 10px;
    cursor: pointer;
}
#old { background-color: yellow; }
#new { background-color: orange; }

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
    <em class="button" id="old">old button</em>
</div>

Since the #new element does not exist yet upon creating the click handler, it is not bound properly. A solution that doesnt require re-binding event handlers constantly:

$('#old').click(function(){
    $('#old').addClass('hidden');
    $('#new').removeClass('hidden');
});
$('#new').click(function(){
    $('#new').addClass('hidden');
    $('#old').removeClass('hidden');
});

See this Fiddle for the acpanying html/css.

Although there are better ways to achieve what you want (see Renzo Poddighe's answer and Rejith R Krishnan's answer), here is what you need to do: re-bind the click event when you create the new elements. Also it is a good idea to remove the old event handlers with the off method.

var oldButton = '<em class="button" id="old">old button</em>'
var newButton = '<em class="button" id="new">new button</em>'
function bindOldEvent() {
    $('#old').click(function(){
        $('div').off().html(newButton);
        bindNewEvent();
    });
}

function bindNewEvent() {
    $('#new').click(function(){
        $('div').off().html(oldButton);
        bindOldEvent();
    });
}
bindOldEvent();

http://jsfiddle/mdrwm5zn/2/

本文标签： javascriptjQuery target element added with html() or append()Stack Overflow