jQueryJavaScript Bubbling and stopPropagation doesn't work - Stack Overflow

admin管理员组

文章数量:1313120

I'm making an edit button which pops up a modal box with a form to edit it. jQuery then sends this form to my server and I get a JSON response back. However, due to my bubbling issue, if I click on, for example, all of the edit buttons and then click on the last one and change a field, it does it across all of them.

$('.edit').click(function(event){
 //more code...
    modal_submit(the_id);
    event.stopPropagation();
});

and then the submit event:

function modal_submit(the_id){
$('#modal form').submit(function(){
    //This will alert every time I have EVER clicked on an edit button
    alert(the_id);
    return false;
});

}

finally all of this is inside of a getScript:

$.getScript('js/edit.js',function(){
create_edit_btn();

});

I've only used this 1 other time, and it worked, but I also had to do this.event.stopPropagation, but if I do "this" now it says this.event is undefined, but like I said, this exact code worked before for another script I did.

Does anyone have any ideas? :\

EDIT:

the html is: 
<li> 
  <input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting">  
    <p>Hosting for your web site</p>
</li>

I'm making an edit button which pops up a modal box with a form to edit it. jQuery then sends this form to my server and I get a JSON response back. However, due to my bubbling issue, if I click on, for example, all of the edit buttons and then click on the last one and change a field, it does it across all of them.

$('.edit').click(function(event){
 //more code...
    modal_submit(the_id);
    event.stopPropagation();
});

and then the submit event:

function modal_submit(the_id){
$('#modal form').submit(function(){
    //This will alert every time I have EVER clicked on an edit button
    alert(the_id);
    return false;
});

}

finally all of this is inside of a getScript:

$.getScript('js/edit.js',function(){
create_edit_btn();

});

I've only used this 1 other time, and it worked, but I also had to do this.event.stopPropagation, but if I do "this" now it says this.event is undefined, but like I said, this exact code worked before for another script I did.

Does anyone have any ideas? :\

EDIT:

the html is: 
<li> 
  <input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting">  
    <p>Hosting for your web site</p>
</li>

• javascript
• jquery
• debugging
• events
• onclick

Share Improve this question Follow edited Jul 25, 2009 at 2:02 geowa4 41.9k1717 gold badges9090 silver badges107107 bronze badges asked Jul 25, 2009 at 1:41 Oscar GodsonOscar Godson 32.8k4242 gold badges125125 silver badges206206 bronze badges 8

• I think your question is unclear. Is the problem that your alert(the_id) is happening multiple times for each click of an edit button? I'm not quite seeing how event propagation is an issue here, although seeing the html could help if that is actually the issue. – phairoh Commented Jul 25, 2009 at 1:50
• yes, it does an alert for each time .edit is clicked – Oscar Godson Commented Jul 25, 2009 at 1:57
• the html is: <li> <input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting"> <p>Hosting for your web site</p></li> – Oscar Godson Commented Jul 25, 2009 at 1:58
• wait, you tell it to alert every time a .edit is clicked. you call modal_submit which alerts the id. of course it happens every time one of them is clicked. – geowa4 Commented Jul 25, 2009 at 2:04
• Your latest html should include also those form elements. The li you showing isn't really related to the code. – xandy Commented Jul 25, 2009 at 2:05

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

An event can have multiple event listeners. Each time you use $(element).submit(whateverFunction) you are adding another whateverFunction to the submit event. If you only want only the last listener to be the action that is taken upon envoking the event, try doing this:

function modal_submit(the_id){

$('#modal form').unbind(); // this will remove all other event listeners from this element

$('#modal form').submit(function(){
        //This will alert every time I have EVER clicked on an edit button
        alert(the_id);
        return false;
});

I think you event.stoppropagation does its job already. It stopped all the bubbling on the click event of the button (ie, if you try checking the document body, it won't have mouse click event anymore). The reason why codes within submit of the form is still executed, is because this is called by the button's default action.

Together with event.stoppropagation(), I suggest you include this:

event.preventDefault();

So that the default action will not used and only the codes within your handler is executed.

Is this in the function that creates edit buttons?

$('.edit').click(function(event){
 //more code...
        modal_submit(the_id);
        event.stopPropagation();
});

If it this, then it will add this handler multiple times to the same elements, causing a flurry of alerts. Use live, which will place the handler on every matched element, even if is is added later in execution.

本文标签： jQueryJavaScript Bubbling and stopPropagation doesn39t workStack Overflow