click with mouse not working as expect

Question

<ul>
<li>
<a href='javascript:;' class='close'>close</a>
<a>openId</a>
</li>
</ul>

I want to remove the li element when click a.close.The li is generate dynamic, which means each time a new li was generated, I will do something like this.

$("a.close").unbind("click").click(function(){
    console.log("close click");
})

however, it didn't work as expected, when I type $("a.close").click() in chrome console, it print "close click" as expected, but when I click the a.close area with mouse, it didn't show anything, which means the event didn't trigger.

what is the difference between js's click function and mouce click using hands?

Your code works in a non-static environment (https://jsfiddle.net/tj53zxx4/) which implies the issue is with how and when you run the `unbind()`/`click()` methods above. It's pretty redundant anyway, as you can solve the problem far more effectively by using a delegated event handler on the dynamic content. Closing as a dupe. — Rory McCrossan, Apr 20 '17 at 06:59
I would recommend to delegate the event, this way you bind once, and it will trigger on every `` click even the `` was added after the event binding. `$('ul').on('click', 'a.close', function () { console.log("close click"); });` Now if you are looking for a way to trigger the event then you can try the following: `$('a.close').trigger('click');` — Darlesson, Apr 20 '17 at 07:01
It would help to describe what you guys mean by delegate the event. If you're going to close as a dupe, it would help to indicate which question it's a duplicate of — Charlie, Apr 20 '17 at 07:02
finally found that the name of class[close] might conflict with some of framework I used in the project, change to closex solove the problem, thanks for all your best practise or solution. — teik, Apr 20 '17 at 08:41

prog1011 · Answer 1 · 2017-04-20T07:09:15.443

0

when you bind any event to any HTML element it will work fine... but once you remove that element from DOM and again add same element into DOM you need to bind click event again for that newly added element. So it is become difficult ... instead of this .. you can just register click event (as below) then no need to bind event again and again ... Any newly added HTML element will also get the same event ....

Note:- note that the elements that should match (a.close in this case) need not exist at the time of binding (hence it applies to dynamically added elements as well).

You just need to register your click event as below ...

$('body').on("a.close","click",function(){
      alert('click event fired !')
});

edited Apr 20 '17 at 07:09

answered Apr 20 '17 at 06:59

prog1011

3,157
3
20
49

Why attach to body? – Charlie Apr 20 '17 at 07:00
@teek - please check above answer – prog1011 Apr 20 '17 at 07:04

click with mouse not working as expect

1 Answers1