问题
I have a jquery functionality where I have two tabs.
On click, each tab makes an ajax call and paints a jsp page.
Second tab has got a slide toggle.
My problem is initially when the page loads I click on the second tab, the slide toggle works fine.
When I click on the first tab and click on the second tab the slide toggle will quickly open and close.
How to stop this propagation?
I tried event .preventDefault(), stopPropagation(), die etc.. no luck.
The code I tried is in below. The slide toggle method is one js file and the other two in a different js file.
jQuery(function() {
//$(".trigger1").on('click', function (e) {
$("#qstnlist_content").off('click', '.trigger1').on('click', '.trigger1', function(event) {
// $(".trigger1").die('click').live('click',function(event){
//if($(event.target).is('div.trigger1')){
//$("document").off('click', "#list_intrv_qstns").on('click', "#list_intrv_qstns", function (e) {
var str = $(this).find("span.imgplus").text();
if (str.indexOf("+") >= 0) $(this).find("span.imgplus").html("- ");
if (str.indexOf("-") >= 0) $(this).find("span.imgplus").html("+ ");
$(this).next("div.dispnone").slideToggle("slow");
/* if(event.preventDefault){ event.preventDefault()}
else{event.stop()};
event.returnValue = false;*/
event.stopImmediatePropagation();
event.stopPropagation();
return false;
});
});
$("#list_intrv_qstns").off('click').on('click', function(event) {
$("#qstnlist_content").removeClass();
$("#qstnlist_content").addClass('dispnone');
$("#qstn_content").removeClass();
$("#qstn_content").addClass('dispshow');
$("#qstnlist_content").off("click", ".trigger1");
event.stopImmediatePropagation();
$("#list_intrv_qstns_a").css('color', 'black');
$("#start_intrv_a").css('color', 'white');
$("#add_intrv_qstns_a").css('color', 'white');
$("#create_intrv_qstns_a").css('color', 'white');
$("#create_intrv_template_a").css('color', 'white');
var inputData = {
usrid: $(this).data("usrid"),
buddyId: $("#qstbuddyid").val()
}
$.ajax({
url: "listquestions",
dataType: "html",
data: inputData,
success: function(data) {
$("#qstn_content").empty().html(data);
},
error: function() {
alert('Issue with save. ');
}
});
// if(event.preventDefault){ event.preventDefault()}
// else{event.stop()};
//event.returnValue = false;
event.stopImmediatePropagation();
event.stopPropagation();
});
$("#list_intrv_qstns").click();
// $("#add_intrv_qstns").die('click').live('click', function(e){
$("#add_intrv_qstns").off('click').on('click', function(event) {
$("#qstnlist_content").removeClass();
$("#qstnlist_content").addClass('dispshow');
$("#qstn_content").removeClass();
$("#qstn_content").addClass('dispnone');
//$("#qstnlist_content").off("click",".trigger1");
$("#list_intrv_qstns_a").css('color', 'white');
$("#start_intrv_a").css('color', 'white');
$("#add_intrv_qstns_a").css('color', 'black');
$("#create_intrv_qstns_a").css('color', 'white');
$("#create_intrv_template_a").css('color', 'white');
var inputData = {
usrid: $('#usrid').val(),
buddyId: $("#qstbuddyid").val()
}
$.ajax({
url: "questions",
dataType: "html",
data: inputData,
success: function(data) {
$("#qstnlist_content").empty().html(data);
},
error: function() {
alert('Issue with loading add questions. ');
}
});
//event.stopPropagation();
event.stopImmediatePropagation();
event.stopPropagation();
//event.preventDefault();
// event.preventCapture();
//event.preventBubble();
// if(event.preventDefault){ event.preventDefault()}
//else{event.stop()};
//event.returnValue = false;
//event.stopImmediatePropagation();
});
Jsp:
<div class="Interviewprocess">
<form id="feedback_form" action="savefeedback" method="post">
<fieldset>
<legend>Interview Process</legend>
<input type="hidden" name="buddyBO.intrvBuddyId" value="${interviewModel.buddyBO.intrvBuddyId}">
<ul id="tabmenu" >
<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="add_intrv_qstns"><a href="#" id="add_intrv_qstns_a" style="color:white">Add Questions</a></li>
<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="create_intrv_qstns"><a href="#" id="create_intrv_qstns_a" style="color:white">Create Questions</a></li>
<li data-usrid="${hmEmpId}" id="list_intrv_qstns"><a href="#" id="list_intrv_qstns_a" class="active" style="color:black">Review Question List</a></li>
<!--<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="create_qstns_template"><a href="#" id="create_qstns_template_a" style="color:white">Crt</a></li>-->
<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="start_intrv"><a href="#" id="start_intrv_a" style="color:white">Start Interview</a></li>
</ul>
<div id="qstn_content" ></div><!--content-->
<div id="qstnlist_content" class="dispnone"></div>
</fieldset>
</form>
</div>
回答1:
To quote from the documentation, one of the many drawbacks of live() is:
Calling event.stopPropagation() in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to document
Since jQuery 1.7 you should be using on() instead of live() or if you are using an older version bind() or delegate().
See this post for more details on the different binding methods and when they were added and who replaced which and when.
Try using off(), on() instead. For example:
$("#list_intrv_qstns").off('click').on('click', function (e) {
Or if list_intrv_qstns is a dynamically added element:
$(document).off('click', "#list_intrv_qstns").on('click', "#list_intrv_qstns", function (e) {
Note though that for dynamic elements you should be binding to the closest static element but as I don't know what that is in your code I used document but you can replace that.
Additional Resources
click()
bind()
live() (don't use)
delegate()
on()
来源：https://stackoverflow.com/questions/11909574/how-to-stop-event-propagation-with-slide-toggle-modified-with-the-updated-code