2

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

我的问题最初是当页面加载时我单击第二个选项卡，滑动切换工作正常。

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

如何阻止这种传播？

我尝试了 event .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：

<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>
4

1 回答 1

1

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

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

从 jQuery 1.7 开始，您应该使用on()而不是live()或者如果您使用的是旧版本的bind() 或delegate()。

有关不同绑定方法的更多详细信息，以及添加它们的时间以及替换的对象和时间，请参阅这篇文章。

尝试使用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但您可以替换它。

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

于 2012-08-10T21:38:45.793 回答