переопределение функции JQuery .click () - PullRequest
Новая
       19

переопределение функции JQuery .click ()

4 голосов
/ 18 августа 2010

У меня возникли некоторые проблемы с функцией jquery click, ниже приведена часть макета моего кода: 

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

Заголовок, текст в дневнике-событии-заголовке и текст в дневнике-событии-теле - все генерируются динамически, а к классу "день-главный-дневник" привязана функция щелчка (фактический код в файле js это: 

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

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

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

и 

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

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

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

1 Ответ

4 голосов
/ 18 августа 2010

Во-первых, помните, что на странице может быть только один #delete идентификатор. Если их больше одного, у вас будут проблемы, и вы должны сделать это классом .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. Не уверен, каково ожидаемое поведение.

Еще одним вариантом будет проверка 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');
...