如何使用幻灯片触发器停止事件传播，并使用更新的代码进行了修改. [英] how to stop event propagation with slide toggle-modified with the updated code.

问题描述

我有一个jQuery功能，其中有两个选项卡.
在click上，每个选项卡都会进行ajax调用并绘制一个jsp页面.
第二个标签有一个滑动开关.

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.

如何阻止这种传播?

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

I tried event .preventDefault(), stopPropagation(), die etc.. no luck.

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

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>

推荐答案

引用 文档 ，live()的众多缺点之一是:

To quote from the documentation, one of the many drawbacks of live() is:

在事件处理程序中调用event.stopPropagation()在以下情况下无效 停止附加在文档下方的事件处理程序；该事件有 已经传播到文档

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

自jQuery 1.7起，您应该改用 on() live() 或您使用的是旧版本 bind() 或 delegate() .

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.

尝试改用off()，on().例如:

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

或者list_intrv_qstns是动态添加的元素:

Or if list_intrv_qstns is a dynamically added element:

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

尽管请注意，对于动态元素，应该绑定到最接近的静态元素，但是由于我不知道代码中的内容，因此我使用了document，但是您可以替换它.

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.

其他资源
> click()
bind()
live()(不要使用)
> delegate()
on()

Additional Resources
click()
bind()
live() (don't use)
delegate()
on()

这篇关于如何使用幻灯片触发器停止事件传播，并使用更新的代码进行了修改.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！