jQuery的事件和骨干

我有一个事件在单击时射击两次，我试图打开一个div是一个链接的点击可折叠，然后再次关闭在第二次点击的问题。问题在于链接是页面上具有相同类和相同功能的众多链接之一。会发生什么是开放式的事件发生，紧接着的关闭事件，jQuery的事件和骨干

我不知道为什么发生这种情况，因为我使用的识别点击的元素，

e.currentTarget();

，但它似乎对于点击哪个元素会感到困惑。

这里是我的代码，

打开DIV

itemTab: function(e) { 

    var clicked = $(e.currentTarget), 
     clickedTab = clicked.data("tab"); 

    clicked.parent().parent().parent().find(".action-btn").css({ 
     "width" : "0px", 
     "display" : "none" 
    }); 

    clicked.parent().find("div.action-btn").show().animate({ 
     "width" : "28px" 
    }, 250); 

    //clicked.closest(".item-tabs").find("li#active").attr("id", ""); 
    clicked.closest(".item-tabs").find("li.active").removeClass("active"); 
    clicked.closest(".items-tabs").find("li.active").removeClass("active"); 
    clicked.parent().addClass("active").attr("id", "active"); 
    clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active"); 
    clicked.closest(".item-tabs").find("." + clickedTab).addClass("active"); 
    clicked.closest(".item-tabs").find(".close").css("visibility", "visible"); 

    e.preventDefault(); 
},

关闭DIV

closeTab: function(e) { 

      var clicked = $(e.currentTarget).parent(), 
        clickedTab = clicked.data("tab"); 

      clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() { 
        clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active"); 
      }); 

      clicked.removeClass("active"); 

      e.preventDefault(); 

    },

的HTML

<article class="item"> 

    <header class="active"> 
     <h1> 
      <span class="expander"></span> 
      <span class="item_name editable">New Item</span> 
      <span class="js-complete-item complete-item ">=</span> 
      <span class="fileinputbar-button js-open-adder-form add-item-task">+</span> 

      <ul class="floating-menu"> 
        <span class="tip"></span> 
        <li class="js-add-new-task add-new-task"><a href="#">Add Task</a></li> 


        <li class="js-add-new-item add-new-item"><a href="#">Add Item</a></li> 

      </ul> 
      <span class="tasks meta"> 

      <span class="js-task-count">6/6 tasks</span> 
      <span class="js-completion-status"></span> 



     </span></h1> 


     <div class="inline-edit item" style="display: none;"> 


      <form action="/projects/items/edit/71" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">    

       <p> 
        <input type="text" name="item_name" value="New Item" class="item_name">   
       </p> 
       <p> 
        <input type="submit" name="submit" value="Update"> 
        <a class="cancel" href="#">Cancel</a> 

         <a href="/projects/items/delete/71" class="delete js-delete-item">Delete</a> 

       </p> 
        </form> 





     </div> 

     <div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div> 
    </header> 



    <div class="item_content" style="display: block;"> 
     <div class="item-tabs"> 
      <ul class="tab-links"> 
       <li class="active" id="active"><div></div><a href="" class="item-tab" data-tab="description">Description</a><div></div></li> 
       <li class="" id="active"><div></div><a href="" class="item-tab" data-tab="tasks" style="color: red;">Tasks</a><div></div><div class="action-btn js-add-tasks" style="width: 0px; display: none;"></div></li> 
      </ul> 
      <div class="tab-content description active"> 
       <span class="item_description editable"> 
        <p class="add-text js-add-item-description"> 

          <span class="faded">No Description, Click to add</span> 

        </p> 
       </span> 
       <div class="inline-edit js-item-description-edit" style="display: none;"> 
        <form action="/projects/items/edit_description/71" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">     
         <p> 
          <textarea autofocus="" name="item_description" class="edit_item_description"></textarea> 
          <!--<input type="text" name="item_description" value="" class="edit_item_description"> --> 
         </p> 
         <p> 
          <input type="submit" name="submit" value="Update">     
          <a class="cancel" href="#">Cancel</a> 
         </p> 
        </form> 
       </div> 
      </div> 
      <div class="tab-content tasks"><article class="task-list"> 

    <header> 
     <h1 class="tasks active"> 
      <span class="js-task-header">Tasks</span> 
      <span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span> 
     </h1> 
    </header> 
     <div class="tasks active"> 
     <span class="toggle-header"> 
      <div class="labels"> 
       <ul> 
        <li><a href="#" class="label" id="active">Active<i class="close-label"></i></a></li> 
        <li><a href="#" class="label" id="completed">Complete<i class="close-label"></i></a></li> 
       </ul> 
      </div> 
       <input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search"> 


</span><div class="new-task js-new-task" style="display: none;"> 
       <form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> 
        <p> 
         <textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea><a href="#" class="js-task-adder-addbutton"></a> 
         <input type="submit" name="submit" value="Update" class="js-task-adder-input-submit"> 
         <a class="cancel" href="#">Cancel</a> 
         <span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span> 
        </p> 
       </form> 

       <a href="/projects/items/stages/tasks/add/12" title="Add New Task" class="js-task-adder-add-new-task js-task-adder-trigger" data-url="/projects/items/stages/tasks/add" data-id="12"></a> 
</div> 
    <ol class="tasks active"><div name="dasdsadas" task_id="129" id="129" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:39:23+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12"> 
    <li class=""> 
    <h5><span class="task_name editable">dasdsadas</span> 


     <form action="/tasks/edit/129" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">   <p> 
       <textarea name="task_name" class="task_name_edit">dasdsadas</textarea> 
       <input type="submit" name="submit" value="Update">    <a class="cancel" href="#">Cancel</a> 
       <a href="/items/stages/tasks/delete/dasdsadas" title="Delete Task" class="delete">delete</a>   </p> 
     </form> 

     <div style="clear:both"></div> 
     </h5> 
      <div class="meta"> 
       <span>Created by Me <time datetime="2013-09-26T14:39:23+01:00" title="2013-09-26T14:39:23+01:00">5 days ago</time> 
       </span> 






    <span class="path"> 

     [ <span class="item">New Item</span> 
     ] 
    </span> 


      </div> 


      <div class="update"> 
        <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/129" data-id="129">active</a> 
      </div> 


     </li> 
</div><div name="sdasdas" task_id="127" id="127" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T16:26:07+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12"> 
    <li class=""> 
    <h5><span class="task_name editable">sdasdas</span> 


     <form action="/tasks/edit/127" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">   <p> 
       <textarea name="task_name" class="task_name_edit">sdasdas</textarea> 
       <input type="submit" name="submit" value="Update">    <a class="cancel" href="#">Cancel</a> 
       <a href="/projects/items/stages/tasks/delete/sdasdas" title="Delete Task" class="delete">delete</a>   </p> 
     </form> 

     <div style="clear:both"></div> 
     </h5> 
      <div class="meta"> 
       <span>Created by Me <time datetime="2013-09-25T16:26:07+01:00" title="2013-09-25T16:26:07+01:00">6 days ago</time> 
       </span> 






    <span class="path"> 

     [ <span class="item">New Item</span> 
     ] 
    </span> 


      </div> 


      <div class="update"> 
        <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/127" data-id="127">active</a> 
      </div> 


     </li> 
</div><div name="New Sub Item Task 2" task_id="124" id="124" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:43:00+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12"> 
    <li class=""> 
    <h5><span class="task_name editable">New Sub Item Task 2</span> 


     <form action="/tasks/edit/124" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">   <p> 
       <textarea name="task_name" class="task_name_edit">New Sub Item Task 2</textarea> 
       <input type="submit" name="submit" value="Update">    <a class="cancel" href="#">Cancel</a> 
       <a href="/projects/items/stages/tasks/delete/New Sub Item Task 2" title="Delete Task" class="delete">delete</a>   </p> 
     </form> 

     <div style="clear:both"></div> 
     </h5> 
      <div class="meta"> 
       <span>Created by Me <time datetime="2013-09-25T09:43:00+01:00" title="2013-09-25T09:43:00+01:00">6 days ago</time> 
       </span> 






    <span class="path"> 

     [ <span class="item">New Item</span> 
     ] 
    </span> 


      </div> 


      <div class="update"> 
        <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/124" data-id="124">active</a> 
      </div> 


     </li> 
</div><div name="New Sub Item Task 1" task_id="123" id="123" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T09:42:48+01:00" completion_date="1999-11-30T01:00:00+00:00" completed="active" parent_id="71" parent_type="item" project_id="12"> 
    <li class=""> 
    <h5><span class="task_name editable">New Sub Item Task 1</span> 


     <form action="/tasks/edit/123" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">   <p> 
       <textarea name="task_name" class="task_name_edit">New Sub Item Task 1</textarea> 
       <input type="submit" name="submit" value="Update">    <a class="cancel" href="#">Cancel</a> 
       <a href="/projects/items/stages/tasks/delete/New Sub Item Task 1" title="Delete Task" class="delete">delete</a>   </p> 
     </form> 

     <div style="clear:both"></div> 
     </h5> 
      <div class="meta"> 
       <span>Created by Me <time datetime="2013-09-25T09:42:48+01:00" title="2013-09-25T09:42:48+01:00">6 days ago</time> 
       </span> 






    <span class="path"> 

     [ <span class="item">New Item</span> 
     ] 
    </span> 


      </div> 


      <div class="update"> 
        <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/123" data-id="123">active</a> 
      </div> 


     </li> 
</div> 
    </ol> 
     </div> 
</article></div> 
     </div> 
    <article class="item"> 

    <header class="active"> 
     <h1> 
      <span class="expander"></span> 
      <span class="item_name editable">New Item Sub Item</span> 
      <span class="js-complete-item complete-item ">=</span> 
      <span class="fileinputbar-button js-open-adder-form add-item-task">+</span> 

      <ul class="floating-menu"> 
        <span class="tip"></span> 
        <li class="js-add-new-task add-new-task"><a href="#">Add Task</a></li> 


      </ul> 
      <span class="tasks meta"> 

      <span class="js-task-count">2/2 tasks</span> 
      <span class="js-completion-status"></span> 



     </span></h1> 


     <div class="inline-edit item" style="display: none;"> 


      <form action="/projects/items/edit/" method="post" accept-charset="utf-8" id="item_name" class="inline_edit edit_item_name" novalidate="novalidate">     

       <p> 
        <input type="text" name="item_name" value="New Item Sub Item" class="item_name">    
       </p> 
       <p> 
        <input type="submit" name="submit" value="Update"> 
        <a class="cancel" href="#">Cancel</a> 

         <a href="/projects/items/delete/" class="delete js-delete-item">Delete</a> 

       </p> 
        </form> 





     </div> 

     <div class="percentage_bar" title="0% Complete" style="background-color: #18fbc5; width: 0%;">0% Complete</div> 
    </header> 



    <div class="item_content" style="display: block;"> 
     <div class="item-tabs"> 
      <ul class="tab-links"> 
       <li class=""><div></div><a href="" class="item-tab" data-tab="description">Description</a><div></div></li> 
       <li class="active" id="active"><div></div><a href="" class="item-tab" data-tab="tasks" style="color: red;">Tasks</a><div></div><div class="action-btn js-add-tasks" style="width: 28px; display: block;"></div></li> 
      </ul> 
      <div class="tab-content description"> 
       <span class="item_description editable"> 
        <p class="add-text js-add-item-description"> 

          <span class="faded">No Description, Click to add</span> 

        </p> 
       </span> 
       <div class="inline-edit js-item-description-edit" style="display: none;"> 
        <form action="/projects/items/edit_description/" method="post" accept-charset="utf-8" id="item_description" class="inline_edit edit_item_description" novalidate="novalidate">    
         <p> 
          <textarea autofocus="" name="item_description" class="edit_item_description"></textarea> 
          <!--<input type="text" name="item_description" value="" class="edit_item_description"> --> 
         </p> 
         <p> 
          <input type="submit" name="submit" value="Update">     
          <a class="cancel" href="#">Cancel</a> 
         </p> 
        </form> 
       </div> 
      </div> 
      <div class="tab-content tasks active"><article class="task-list"> 

    <header> 
     <h1 class="tasks active"> 
      <span class="js-task-header">Tasks</span> 
      <span class="fileinputbar-button js-open-task-adder-form list-header-add">+</span> 
     </h1> 
    </header> 
     <div class="tasks active"> 
     <span class="toggle-header"> 
      <div class="labels"> 
       <ul> 
        <li><a href="#" class="label" id="active">Active<i class="close-label"></i></a></li> 
        <li><a href="#" class="label" id="completed">Complete<i class="close-label"></i></a></li> 
       </ul> 
      </div> 
       <input id="user-search-query" type="text" name="task_search" value="" placeholder="Filter" class="required file-search"> 


</span><div class="new-task js-new-task" style="display: none;"> 
       <form action="" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;"> 
        <p> 
         <textarea autofocus="" name="task_name" class="item task_name_edit js-task-adder-input" title="Add New Task (Press Enter to add)" placeholder="New task name..."></textarea><a href="#" class="js-task-adder-addbutton"></a> 
         <input type="submit" name="submit" value="Update" class="js-task-adder-input-submit"> 
         <a class="cancel" href="#">Cancel</a> 
         <span class="instruction-task-add">Press Enter to add, or shift enter to add a new line</span> 
        </p> 
       </form> 

       <a href="/projects/items/stages/tasks/add/12" title="Add New Task" class="js-task-adder-add-new-task js-task-adder-trigger" data-url="/projects/items/stages/tasks/add" data-id="12"></a> 
</div> 
    <ol class="tasks active"><div id="130" name="A new task!" task_id="130" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-26T14:40:17+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12"> 
    <li class=""> 
    <h5><span class="task_name editable">A new task!</span> 


     <form action="/tasks/edit/130" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">   <p> 
       <textarea name="task_name" class="task_name_edit">A new task!</textarea> 
       <input type="submit" name="submit" value="Update">    <a class="cancel" href="#">Cancel</a> 
       <a href="/projects/items/stages/tasks/delete/A new task!" title="Delete Task" class="delete">delete</a>   </p> 
     </form> 

     <div style="clear:both"></div> 
     </h5> 
      <div class="meta"> 
       <span>Created by Me <time datetime="2013-09-26T14:40:17+01:00" title="2013-09-26T14:40:17+01:00">5 days ago</time> 
       </span> 






    <span class="path"> 

     [ <span class="item">New Item</span> 

      /<span class="stage"> New Item Sub Item</span> ] 

    </span> 


      </div> 


      <div class="update"> 
        <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/130" data-id="130">active</a> 
      </div> 


     </li> 
</div><div id="128" name="Boom!" task_id="128" item="New Item" item_id="71" creator="simonainley" created_by="1" created_on="2013-09-25T17:18:49+01:00" completion_date="1999-11-30T01:00:00+00:00" stage="New Item Sub Item" stage_id="74" completed="active" parent_id="74" parent_type="item" project_id="12"> 
    <li class=""> 
    <h5><span class="task_name editable">Boom!</span> 


     <form action="/tasks/edit/128" method="post" accept-charset="utf-8" class="inline-edit inline_edit edit_task_name" novalidate="novalidate" style="display: none;">   <p> 
       <textarea name="task_name" class="task_name_edit">Boom!</textarea> 
       <input type="submit" name="submit" value="Update">    <a class="cancel" href="#">Cancel</a> 
       <a href="/items/stages/tasks/delete/Boom!" title="Delete Task" class="delete">delete</a>   </p> 
     </form> 

     <div style="clear:both"></div> 
     </h5> 
      <div class="meta"> 
       <span>Created by Me <time datetime="2013-09-25T17:18:49+01:00" title="2013-09-25T17:18:49+01:00">6 days ago</time> 
       </span> 






    <span class="path"> 

     [ <span class="item">New Item</span> 

      /<span class="stage"> New Item Sub Item</span> ] 

    </span> 


      </div> 


      <div class="update"> 
        <a href="#" title="Complete this task" class="complete js-complete-task" data-url="/tasks/toggle_complete/128" data-id="128">active</a> 
      </div> 


     </li> 
</div> 
    </ol> 
     </div> 
</article></div> 
     </div> 
    </div><!-- item_content:end --> 
</article></div><!-- item_content:end --> 
</article>

的活动

events : { 
    "click .item-tabs li:not(.active) a": "itemTab", 
    "click .item-tabs li.active": "closeTab", 
}

是有原因的事件，一前一后直线行驶的开启和关闭的事件吗？

来源

2013-10-01 Udders

很奇怪，我说你的代码在我的BackboneJS代码，你的情况是不会发生在我身上。当我点击链接到活动类的链接是启动了closeTab功能，并且当我点击一个没有活动类的链接子节点时，itemTab被启动。我从来没有在同一次点击中获得这两项功能。你有相似的听众还是另一个有相同观点的观众家长？有时，一个视图包含另一种，就像选择是相同的功能被启动两次。有了这个不同。 – ccsakuweb

试试这个，找出被点击哪个元素：

console.log($(e.currentTarget)); 
console.log($(e.target));

这应该输出点击HTML元素到控制台。

来源

2013-10-01 10:07:13 schabluk

检查isDefaultPrevented执行你的代码可能会解决你的问题为例面前：

closeTab: function(e) { 
    if(!e.isDefaultPrevented()) { // Add this condition to both functions 
     var clicked = $(e.currentTarget).parent(), 
       clickedTab = clicked.data("tab"); 

     clicked.closest(".item-tabs").find(".tab-content.active").slideUp(500, function() { 
       clicked.closest(".item-tabs").find(".tab-content.active").removeClass("active"); 
     }); 

     clicked.removeClass("active"); 

     e.preventDefault(); 
    } 
},

来源

2013-10-01 10:10:45

jQuery的事件和骨干

回答

相关问题