How to use event.stopPropagation(); ?

Hello,

I have searched the internet and found many examples, but I can’t figure out how to use stopPropagation() in my code.

On load there are multiple functions initialized.

[CODE]
$(document).ready(function() {

window.initializeFunctions = initializeFunctions() {
function1();
function2();
function3();
}

// Call the functions onload
initializeFunctions();

function1() {
$(‘li’).live(‘click’, function() {
alert(‘list item clicked’);
});
}

});
[/CODE]

Using AJAX I implement a new element and call [B]initializeFunctions()[/B]

[CODE]
// This is another .js file
$(‘#button’).live(‘click’, function(event) {

$.post(‘/get_list_item/’, {data: ‘data’},

function(data) {

$(‘ul’).append(‘<li>’ + data + ‘</li>’);

}, ‘json’);

// Call functions to the new element
initializeFunctions();

}
[/CODE]

HTML:

[CODE]<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<button>Click here</button>[/CODE]

So when clicking the button a new list item is appended to the list. I know you have to call functions again, to let them work with the new list item. However, the functions are also called on the other existing list items which let the click event trigger twice, when you click on one.

I know to use event.stopPropagation() somewhere, but I don’t know where 🙂

Looking forward to your replies!

Christophe

Also in #JavaScript _↴