Question

我无法触发警报。我错过了什么？（下面的代码在WP插件中）

<?php
wp_enqueue_script('jquery');
?>
<script type="text/javascript">
    jQuery('#myTest').click(function(){alert('hi');});
</script>
<?php
    echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>

Answer 1

脚本在元素之前处理，因此当您分配处理程序时，#myTest不存在。交换它们：

<?php
    echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>
<script type="text/javascript">
    jQuery('#myTest').click(function(){alert('hi');}));
</script>

或者，您可以使用live()，它允许将事件绑定到尚不存在的元素：

<script type="text/javascript">
    jQuery('#myTest').live("click", function(){alert('hi');}));
</script>
<?php
    echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>

或者使用jQuery的ready()处理程序，它将在解析所有元素时触发：

<script type="text/javascript">
    jQuery(document).ready(function ($) { 
        $('#myTest').click(function(){alert('hi');}));
    });
</script>
<?php
    echo "<div><input type='button' value='Test' id='myTest' /></div>";
?>

请注意，在上一个示例中，我将jQuery名称空间置于传递给函数的$参数中。这允许您使用$将jQuery与WordPress一起使用，而不是一直输入jQuery。

Answer 2

您错过了document.ready处理程序，如下所示：

<script type="text/javascript">
jQuery(function() {
  jQuery('#myTest').click(function(){alert('hi');});
});
</script>

通过像这样包装它，它会等到元素加载到DOM中并准备好被jQuery('#myTest')找到。

Answer 3

脚本在加载内容之前执行。当脚本执行时，它无法找到ID为myTest的元素，因此它只是忽略添加事件处理程序。

将事件放在事件之后，或者监听（onload | document.ready）事件。

Answer 4

在脚本代码中尝试此操作：

$(document).ready(function() {
  $('#myTest').click(function(){alert('hi');});
});

我无法得到警报。我错过了什么？

4 个答案: