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

Question

Я использую jQuery для динамического (я имею в виду во время выполнения) добавления элемента span в 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 (я хочу, чтобы он запускался только тогда, когда пользователь фактически щелкает промежуток).

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

Answer 1

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

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

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

Answer 2

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

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

Рабочая демоверсия

Код из демоверсии -

$(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 3

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

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

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

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

Answer 4

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

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