如何使用更新后的代码修改幻灯片切换来停止事件传播。

我有一个jqueryfunction，我有两个选项卡。
click ，每个选项卡都会进行ajax调用并绘制一个jsp页面。
第二个选项卡有一个幻灯片切换。

我的问题是，当页面加载时，我点击第二个选项卡，幻灯片切换工作正常。

当我单击第一个选项卡并单击第二个选项卡时，幻灯片切换将快速打开和关闭。

如何阻止这种传播？

我尝试了事件.preventDefault() ， stopPropagation() ， die等等。没有运气。

我试过的代码如下。 幻灯片切换方法是一个js文件，另外两个在不同的js文件中。

 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：

 
 
 
 
Interview Process
  
 
Add Questions
 
Create Questions
 
Review Question List
 <!--
Crt
--> 
Start Interview
 
 
 
 
 
  

Answer 1

引用文档 ， live()的许多缺点之一是：

在事件处理程序中调用event.stopPropagation（）对于停止附加在文档中较低位置的事件处理程序是无效的; 该事件已经传播到文档

从jQuery 1.7开始，你应该使用on（）而不是live（），或者你使用的是旧版本的bind（）或delegate（） 。

有关不同绑定方法的详细信息，添加时间以及更换时间和时间，请参阅此post 。

尝试使用off() ， on()代替。 例如：

 $("#list_intrv_qstns").off('click').on('click', function (e) { 

或者，如果list_intrv_qstns是动态添加的元素：

 $(document).off('click', "#list_intrv_qstns").on('click', "#list_intrv_qstns", function (e) { 

请注意，对于动态元素，您应该绑定到最接近的静态元素，但由于我不知道您的代码中我使用了什么document但您可以替换它。

其他资源
点击（）
绑定（）
live（）（不要使用）
代表（）
上（）