JQuery: пытаюсь подключить функцию к OnClick при динамическом добавлении в DOM элемента, но он сразу же выполняет функцию вместо

Question

Я использую JQuery динамически (я имею в виду во время выполнения) добавить поверочный элемент в DOM моей страницы:

// create add task button 
$(document.createElement("span")) 
    .attr({ id: activityNameHyphened + "-NewButton", name: activityNameHyphened + "-NewButton" }) 
    .addClass("smallButton") 
    .appendTo(cell1) 
    .click(CreateTaskRow(ActivityName)); 

проблема последняя строка: Я думал, что это будет добавить CreateTaskRow (ActivityName) в качестве обработчика для OnClick случае пролете, так же, как:

<span onclick="CreateTaskRow(ActivityName);"></span> 

чего я хочу, - но когда я запустите его в браузере, я вижу, используя отладчик, что на этой строке это немедленно запускает функцию.

Если я могу сделать это более ясным: CreateTaskRow() запускается, когда я пытаюсь добавить его в onclick (я хочу, чтобы он запускался только тогда, когда пользователь на самом деле нажимает на span).

Любая идея, что я делаю неправильно? (и, пожалуйста, дайте мне знать, если мой вопрос недостаточно ясен)

Answer 1

Вы фактически вызываете функцию и передаете результат обработчику событий .click(). Попробуйте его с закрытием (анонимной функцией) вместо:

.click(function() { 
    CreateTaskRow(ActivityName); 
}); 

Затвор не будет работать, пока click событие не срабатывает.

Answer 2

.click вызывает событие щелчка, необходимо связать функцию к событию, нажмите:

$("p").bind("click", function(e) { 
     var str = "(" + e.pageX + ", " + e.pageY + ")"; 
     $("span").text("Click happened! " + str); 
}); 

Answer 3

Попробуйте с закрытием

$("<span>") 
    .attr({ id: activityNameHyphened + "-NewButton", name: activityNameHyphened + "-NewButton" }) 
    .addClass("smallButton") 
    .appendTo(cell1) 
    .click(function() { CreateTaskRow(ActivityName); }); 

Working Demo

кода из демо -

$(function() { 

    var activityNameHyphened = "id1"; 
    var ActivityName = "This is the highlighted activity"; 

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

    $("<span>I've been added</span>") 
     .attr({ id: activityNameHyphened + "-NewButton", 
       name: activityNameHyphened + "-NewButton" 
      }) 
     .addClass("smallButton") 
     .appendTo("#here") 
     .click(function() { CreateTaskRow(ActivityName); });   
    });  
}); 


function CreateTaskRow(e) 
{ 
    alert(e); 
} 

Answer 4

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

$("span.smallButton").live("click", function() { 
    CreateTaskRow(ActivityName); 
}); 

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

$(document.createElement("span")) 
    .attr({ id: activityNameHyphened + "-NewButton", name: activityNameHyphened + "-NewButton" }) 
    .addClass("smallButton") 
    .appendTo(cell1);