从function.php加载时,WordPress .click或.on无法正常工作 - javascript

在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中看到的那样,它从JavaScript脚本的第一行中打印了“ test”字符串,从而加载了该脚本。

参考方案

您必须使用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()也可以直接用于动态生成的元素,这是不对的。这就是为什么我添加此解决方案以便它在两种情况下均适用的原因。

Javascript-从当前网址中删除查询字符串 - javascript

单击提交按钮后,我需要从网址中删除查询字符串值。我可以用jQuery做到这一点吗?当前网址:siteUrl/page.php?key=value 页面提交后:siteUrl/page.php 实际上,我已经从另一个带有查询字符串的页面着陆到当前页面。我需要在页面首次加载时查询字符串值以预填充一些详细信息。但是,一旦我提交了表格,我就需要删除查询字符串值。我已…

Mongo汇总 - javascript

我的收藏中有以下文件{ "_id": ObjectId("54490b8104f7142f22ecc97f"), "title": "Sample1", "slug": "samplenews", "cat": …

如何在JQuery中操作JSONArray - javascript

我有一个php函数,它以JSON返回此代码{"0":{"title":"Dans l\u2019appartement"},"1":{"title":"A l\u2019a\u00e9roport - D\u00e9part de B\u00e9at…

JavaScript中的字符串评估函数 - javascript

            JavaScript中是否有任何内置函数,例如Python中的eval内置函数?注意:eval函数将方程式作为字符串并返回结果。例如,假设变量x为2,则eval("2x+5")返回9。 参考方案 是的,JavaScript中也有eval函数。此外,该声明应有效用于评估,即eval("2*x+5"…

在两个值之间匹配并返回正则表达式 - javascript

我正在尝试使用正则表达式从字符串中获取值,该值是tt="和"&之间的文本的值因此,例如,"tt="Value"&"我只想从中得到单词"Value"。到目前为止,我已经有了:/tt=.*&/这给了我"tt=Value"&,然后,要…