Click Event On Li Its Not Work Perfect
Solution 1:
It is quite hard to know what you are trying to. Therefor here first an explanation what you are doing. You generate a html fragment like this (via xlst):
<ul>
<li>Physical1<ul>
<li>Cricket<ul>
<li onclick="final()">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
There is one onlclick handlder (onclick="final()) at the li element without children.
function final(){
$('li:not(:has(*))').click(function(){
alert('click');
$('#result').text($(this).text());
});
}
Firs click on "One Day" item calls final(). The final function than sets new onclick handler to all li elements with not children.
Which is the same and only element which has already an final as onclick hanlder
Because of event propagation the next click calls the new hanlder and afterward final. Which installs again a new onclick handler. Now wee have already three handler on the element. And each click add one more. To stop this can you try to use event.stopPropagation(); or to remove the event handler attr('onclick', '').off('click');
function final() {
var lis = $('li:not(:has(*))');
lis.attr('onclick', '').off('click');
$('li:not(:has(*))').click(function(event) {
$('#result').text($(this).text());
});
}
But I more suspect that the selector is wrong $('li:not(:has(*))').
Some more comments:
- It would not make lot sense to set event handler to your parent <li> elements either. Because the li elements include each other (what is correct!) clicking on an child will also trigger the handler of the parent elements.
- Therefore (perhaps) you should add elements around the content (text) of the li elements.
(<li><span>Physical1</span><ul><li>...)
- Than you can add the onclick handler the span elements.
- If only the "final" elements should trigger an event, you do not need to set any new click functions.
function final(){
alert('click');
$('#result').text($(this).text());
}
Post a Comment for "Click Event On Li Its Not Work Perfect"