Question

我之前有一个脚本工作，它只是一个WordPress页面上的内联脚本。但现在我从function.php加载它。

这适用于我的其他JavaScript脚本，但.click或.on不会对此脚本有效...

$( "td.event-test" ).on("click",
  function() {
    $("p").empty();
    $(".event-title").empty();
    $(".event-title2").empty();
    $("<h1>EVENT #01</h1>").appendTo(".event-title");
    $("<p>Here is information for event!</p>").appendTo(".event-info");
    $("<p>more info for event</p>").appendTo(".more-event-info");
    $("<p><a>LINK TO EVENT SITE</p></a>").appendTo(".event-link");
    $("a").attr("href", "events");
  }
);

它无法正常工作，.click版本也无法正常工作：

$( "td.event-test" ).click(
  function() {
    $("p").empty();
    $(".event-title").empty();
    $(".event-title2").empty();
    $("<h1>EVENT #01</h1>").appendTo(".event-title");
    $("<p>Here is information for event!</p>").appendTo(".event-info");
    $("<p>more info for event</p>").appendTo(".more-event-info");
    $("<p><a>LINK TO EVENT SITE</p></a>").appendTo(".event-link");
    $("a").attr("href", "events");
  }
);

它加载脚本，因为我可以看到console.log打印＆＃34; test＆＃34; JavaScript脚本第一行的字符串。

Answer 1

您必须使用event delegation：

$(document).on("click","td.event-test",function() {
    $("p").empty();
    $(".event-title").empty();
    $(".event-title2").empty();
    $("<h1>EVENT #01</h1>").appendTo(".event-title");
    $("<p>Here is information for the event!</p>").appendTo(".event-info");
    $("<p>More info for the event</p>").appendTo(".more-event-info");
    $("<p><a>LINK TO THE EVENT SITE</p></a>").appendTo(".event-link");
    $("a").attr("href", "events");
});

注意：我已经添加了这个答案，因为我在OP的代码中看到了on()，所以我认为OP认为on()也会直接用于动态生成的元素，这是不对的。这就是我添加此解决方案以便它适用于两种情况的原因。

从function.php加载时，WordPress .click或.on无效

1 个答案: