Don't work my jQuery code after append

Question

Don't work my jQuery code after append. how can just change js code and worked it?

I don't use from ides "#aaa or #sss", How do without use them?

html:

<a href="" class="qqq">Click Me</a>
<div id="aaa">
    <div id="sss">
    </div>
</div>

jQuery:

$('.qqq').on('click', function (e) {
    e.preventDefault();
    $('#sss').empty().append('After typed must result alert: "This is ok" !??<div class="auto_box"><input name="we" class="de1"></div>');
})
$('.auto_box').on('keyup change', '.de1', function () {
    alert('This is ok');
})

score 1 · Answer 1 · answered Dec 05 '13 at 09:26

1

Try this like,

$('#sss').on('keyup change', '.auto_box .de1', function () {
    alert('This is ok');
});

Demo 1

Or

$('.qqq').on('click', function (e) {
    e.preventDefault();
    $('#sss').empty().append('After typed must result alert: "This is ok" !??<div class="auto_box"><input name="we" class="de1"></div>');    
    // bind event here
    $('.auto_box').on('keyup change', '.de1', function () {
        alert('This is ok');
    });
});

Demo 2

answered Dec 05 '13 at 09:26

Rohan Kumar

40,431
11
76
106

I don't use from ides "#aaa or #sss", How do without use them? – Taylor Gomez Dec 05 '13 at 09:29
See `second demo` without `#aaa` and `#sss` – Rohan Kumar Dec 05 '13 at 09:30

score 0 · Answer 2 · answered Dec 05 '13 at 09:26

0

Try:

$(document).on('keyup change', '.de1', function () {
    alert('This is ok');
});

Updated fiddle here.

answered Dec 05 '13 at 09:26

codingrose

15,563
11
39
58

I don't use from ides "#aaa or #sss", How do without use them? – Taylor Gomez Dec 05 '13 at 09:28

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

replace '.auto_box' with document.

$(document).on('keyup change', '.de1', function () {
    alert('This is ok');
});

Reason:Why the above code works and yours does not?

1.You are dynamically adding elements.In simpler words,the element you appended did not exist when DOM was loaded.

2.You need to assign Event Delegation for any future addition of elements.The method that we usually use like .click(...) , .on(..) etc only applies to the elements that are currently in the DOM.

3.This is how you provide Event Delegation.

$(document).on('keyup change', '.de1', function(){.........})

Don't work my jQuery code after append

3 Answers3