jquery 1.7+ , body append a new element , and how to bind action to it with on() rather than live()?

Question

I used live function before jquery 1.6. In jquery 1.7+, live function is not recommended, but using on function. I have a question with follow code:

        $('#button').on('click', function(event) {
                    //add a new element to body
                    $('body').append('<div class="future">I am a new div</div>');
        });
    //bind a action to new element which is add a moment ago.
    $('body').on('change', '.future', function() {
        $(this).css({
            'color' : 'red',
            'font-weight' : 'bold'
        });
        $(this).text("on click me.");
        $(this).on('click', {
            name : 'liujun'
        }, myhandler);
    });

    function myhandler(event) {
        alert(event.data.name);
    }

new action is not working,and syntax is correct. why?

replace `$(this).on('click',` with `$(this).bind('click',` or `$(this).click(,` ------ `{ name : 'liujun' }` not looks like selector — zb', Oct 14 '12 at 07:31
`
` elements do not emit `change` events. Do you want to handle `change` events triggered on a descendant of the `
`? If that's the case, then the second argument to `on()` should match that element. — Frédéric Hamidi, Oct 14 '12 at 07:34
@FrédéricHamidi hiya bruv `:)` howz life? I reckon you can - he/she OP is looking for something like this: http://stackoverflow.com/questions/4979738/fire-jquery-event-on-div-change — Tats_innit, Oct 14 '12 at 07:35

score 2 · Answer 1 · edited May 23 '17 at 12:04

2

Working demo http://jsfiddle.net/nQDs2/4/

first click button the try clicking trigger
Then, click on the red on click me message.

Fire jQuery event on div change\

For IE jQuery watch div

I am not sure why I am getting down voted, hope it fits your cause :)

code

$('#button').on('click', function(event) {
    //add a new element to body
    $('body').append('<div class="future">I am a new div</div>');
});


//bind a action to new element which is add a moment ago.
$('body').on('change', '.future', function() {
    $(this).css({
        'color': 'red',
        'font-weight': 'bold'
    });
    $(this).text("on click me.");
    $(this).on('click', {
        name: 'liujun'
    }, myhandler);
}).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
    if (event.type == 'DOMNodeInserted') {
       // alert('Content added! Current content:' + '\n\n' + this.innerHTML);
    } else {
       // alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
    };
});

$('#trgbutton').click(function() {
    $('.future').trigger('change');
});

function myhandler(event) {
    alert(event.data.name);
}

edited May 23 '17 at 12:04

Community

1
1

answered Oct 14 '12 at 07:46

Tats_innit

33,991
10
71
77

2

Downvote why? please comment `:)` C'mon! This is not right! and demotivating at times! – Tats_innit Oct 14 '12 at 07:47
1

Absolutely agree with you. Downvoters: please add explanation before downvoting. You are doing nothing but miss-using your reputation – Dipak Oct 14 '12 at 07:50
2

I did not downvote, but maybe it's due to the DOM mutation events not being supported by all browsers (notably Internet Explorer). – Frédéric Hamidi Oct 14 '12 at 07:50
@FrédéricHamidi *Solution for IE:* http://stackoverflow.com/questions/3233991/jquery-watch-div/3234646#3234646 `:))` this is demotivating when people down vote anyhooo~ – Tats_innit Oct 14 '12 at 07:52
@Tats_innit i think you get downvote because this is not the correct solution of OP question? – StaticVariable Oct 14 '12 at 07:54
1

Upvoted to bypass downvoters. I know the feeling: downvoters without leaving a comment. Annoying and demotivating indeed. – Bram Vanroy Oct 14 '12 at 07:54
Hiya @jhonraymos Thanks bruv, If you will play around with my demo you will see it is working `:)` OP issue was triggering the `change event! – Tats_innit Oct 14 '12 at 07:56
@BramVanroy Thanks heaps bruv! I will neither forget your deed and this shall be returned `:)` cheers! – Tats_innit Oct 14 '12 at 07:56
@Dipaks Thanks bruv! for support! – Tats_innit Oct 14 '12 at 08:00
@Tats_innit i know it is working but ..It is not the exact solution – StaticVariable Oct 14 '12 at 08:00
@jhonraymos how do you mean bruv? `:)` did I missed anything? let me know! if you will play around with my demo you will see that I fixed OPs new action as well `:)` – Tats_innit Oct 14 '12 at 08:01
@Tats_innit i have the same problem `live` works but `on ` function is not working.Because `
` is added after page load? I think this isn't the best approach for that?
– StaticVariable Oct 14 '12 at 08:05
@jhonraymos Cool man `:)` bruv in OPs case its the change eveny on `div` flick me your issue will try to fix it - but in this case - if you see my demo - **1)** click on button **2)** click trigger, to trigger change event on `div` **3)** now click on red tex on the div and the `myHnadler` event will get fire.. Although flick me your issue I will try to help you out `:)` – Tats_innit Oct 14 '12 at 08:08
@jhonraymos all good bruv! Thanks to you as well `:)` Anytime! if you want feel free to flick me the issue I will take a look `:)` – Tats_innit Oct 14 '12 at 08:15
function myhandler(event) { alert(event.data.name); } this function is not call when I click new element. but how? – 君主不是你 Oct 14 '12 at 09:14
hiya @君主不是我 `:)` http://jsfiddle.net/nQDs2/5/ - **step 1)** click on button **step 2)** click on trigger button final **Step 3** click on the red text and you will see your alert getting called! `:)` – Tats_innit Oct 14 '12 at 09:23

score 0 · Answer 2 · answered Oct 14 '12 at 13:40

Im pretty sure this piece of code is the culprit.

$(this).on('click', {
      name : 'liujun'
}, myhandler);

It doesn't look like a valid syntax.

If you want to pass a parameter, try this

   $(this).on("click", function(e) {
      myHandler({name: liujun})
   })

It's actually pretty confusing, if you could show us the HTML in jsFiddle maybe we could help more.

jquery 1.7+ , body append a new element , and how to bind action to it with on() rather than live()?

2 Answers2