嵌套JQuery .click()事件

Question

我想将一个.click()事件嵌套到另一个事件中，但它不起作用。我查看了.on()事件，但我不认为这是我所需要的。下面基本上是我到目前为止所得到的，但它并没有按照预期的工作。

我想点击'adress1‘按钮，直接到下一个页面，在那里我要么单击'profession1’按钮，要么点击'profession2‘按钮，并根据最后两个按钮中的哪个被单击，相应地发生一些事情。

第一个按钮的//HTML代码

<a href="ListofDestricts.html" class="adress" id="adress">adress1</a>

//HTML代码在另一个页面上的最后两个按钮

<a href="#" class="prefession-1" id="profession-1">profession1</a>
<a href="#" class="prefession-2" id="profession-1">profession2</a>

//Javascript/JQuery代码

$("#adress").click(function(){
//Some action here based on #address click event
         $("#profession-1").click(function(){
     //Some action if #profession was clicked after #address 
          });
         $("#profession-2").click(function(){
         //Some other action if #profession2 was clicked instead    
         of profession1 
        });
});

有人告诉我要用以下方法：

$('#adress').on('click', '#profession-1', function() {alert("x1")}).on('click', '#profession-2', function() {alert("x2")});

但这也没用。我觉得我的程序没有注册点击。

非常感谢您的帮助！

Answer 1

“根”元素(在本例中为#address )不是附加单击事件的适当元素。您希望附加到某个父元素并以子元素为目标。JavaScript中的事件冒泡起来，然后缓慢地返回到启动事件Event Propagation的元素。

为补救这一问题：

$('#someParentEl').on(
    'click',
    '#profession-1',
    function() {alert("x1")}
).on(
    'click',
    '#profession-2',
    function() {alert("x2")}
);

二读：

• order.html
• https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation
• http://learn.jquery.com/events/event-delegation/

Answer 2

要完成这样的任务，最好的方法是让数据属性存储，不管是否单击了.假设这是一个单一的网页应用程序。还要确保每个id都是唯一的，并为每个单击事件正确引用。

<a href="ListofDestricts.html" class="address" id="address" data-clicked="false">address1</a>

然后，单击该元素时，在其他元素的每次单击上检查数据属性是否为真。

$("#address").click(function(){
 if($(this).attr("data-clicked") == "true") {
  $(this).attr("data-clicked","false")
 } else {
  $(this).attr("data-clicked","true")
  }
 });

$("#profession-1").click(function(){
 if($("#address").attr("data-clicked") == "true") {
 //Some action
 }
 });

 $("#profession-2").click(function(){
 if($("#address").attr("data-clicked") == "true") {
 //Some action
 }
 });

所有这些都没有经过测试，但它应该会给你指明正确的方向。