Вложение JQuery .click() events

Question

Я хочу вложить одно событие .click() другим, но не работать. Я посмотрел на событие .on(), но я не думаю, что это мне нужно. Ниже в основном то, что у меня есть до сих пор, но оно не работает должным образом.

Я хочу нажать кнопку «adress1», перейти на следующую страницу, где я либо нажимаю кнопку «профессия1», либо кнопку «профессия2», и в зависимости от того, какая из последних двух кнопок нажата, что-то соответствующий бывает.

// 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, не является надлежащим элементом для присоединения события click. Вы хотите присоединить к некоторому родительскому элементу и настроить дочерний элемент. События в JavaScript всплывают и стекают обратно к элементу, который инициировал событие Event Propagation.

Чтобы устранить проблему:

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

Дополнительная литература:

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

Answer 2

Лучший способ АСС omplish что-то вроде этого, заключается в том, чтобы хранить атрибуты данных, было ли что-то нажато ... если предположить, что это одностраничное веб-приложение. Также убедитесь, что каждый идентификатор уникален и правильно указан для каждого события клика.

<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 
} 
}); 

Ничего из этого не было проверено, но это должно указывать на вас в правильном направлении.