наиважнейшая JQuery .click() функция

Question

я имею немного prblem с функцией мыши Jquery, ниже является частью макета моего кода:

<td id="01" class="day-main-diary"> 
    <div title="sdfsdf" class="diary-event ui-corner-all"> 
     <span id="delete"></span> 
     <div class="diary-event-title ui-corner-all"> 
      sdfsdf 
     </div> 
     <div class="diary-event-body ui-corner-all"> 
      <p class="hyphenate">sdfsdf</p> 
     </div> 
    </div> 
</td> 

Названия, текст в дневнике-событии -title и текст в дневнике-событийном теле все динамически генерируется и класс «день-основной дневник» имеет функцию щелчка, связанную с ней (фактическим кодом в файле JS является:

$('.day-main-diary').click(function(){ 
    // Code is here 
} 

я поиск способа распознавания события клика по диапазону с идентификатором «delete», , среди прочего, ih пр попытался

$('.day-main-diary #delete').click(function(){ 

и

$('#delete').click(function(){ 

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

Может ли кто-нибудь мне помочь? я буду вечно замечательным -Matt

Answer 1

Во-первых, помните, что может быть только один #delete ID на странице. Если их больше одного, у вас будут проблемы, и вы должны сделать класс .delete.

Если элемент #delete отсутствует, когда страница загружается (динамическая), вы можете использовать .live(), который позаботится о том, чтобы обрабатывать событие для вас, независимо от того, когда вы добавляете элемент.

$('#delete').live('click', function(){ 
      ... 
}); 

Но обратите внимание, что это будет еще огонь событие на .day-main-diary, а также.

Еще один вариант - позвонить по телефону .delegate() по адресу .day-main-diary (если он находится, когда страница загружается). Это похоже на .live(), но более локализован.

$('.day-main-diary').delegate('#delete', 'click', function() { 
     ... 
}); 

Это также будет стрелять click на .day-main-diary. Не уверен, что такое ожидаемое поведение.

• http://api.jquery.com/live/
• http://api.jquery.com/delegate/

Еще одним вариантом было бы протестировать e.target щелчка мыши в обработчике .day-main-diary щелчка. Если это #delete, сделайте одно, а если нет, сделайте другое.

$('.day-main-diary').click(function(e) { 
    if(e.target.id === 'delete') { 
     // run code for the delete button 
    } else { 
     // do something else 
    } 
}); 

В противном случае, по-прежнему предполагая, что #delete является динамическим, вы можете связать .click()при создании.

$('<span id="delete">delete</span>').click(function(e) { 
     // your code 
     // uncomment the line below if you don't want the 
     // click event to fire on .day-main-diary as well 
     // e.stopPropagation() 
}) 
.appendTo('day-main-diary');