JQuery 中的更改事件起初不会触发

change event in JQuery doesn't trigger at first

本文关键字：事件 JQuery      更新时间：2023-09-26

我对jQuery很陌生。我正在将它用于我的一个WordPress插件。我有以下代码

<script type="text/javascript">
  $(document).ready(function(){
    $("#tmp-preview").html($("#title").val());
    $("#title").change(function(){
      $("#tmp-preview").html(getTweetPreview);
    });
  });
</script>

我希望每次 wordpress 新帖子页面的标题文本字段中的文本更改时，它都应该反映到div 中。但问题是，该事件不会在第一次更改时触发。我的意思是，如果用户第一次写标题并将焦点移到其他部分，则该标题不会在div 中更新。但话又说回来，如果他改变标题，新标题确实会反映出来！为什么会这样？

我

想知道的另一件事是，如果我希望即使文本字段中的焦点没有丢失，标题文本也会在每个字符的更改时在div 中更新，我是否必须使用键控事件还是我可以以某种方式使用更改事件？

PS：问题不在于getTweetPreview（）函数。我已经尝试使用一个简单的字符串，但仍然相同。我相信这是由于wordpress的其他一些函数调用而发生的，因为当标题完成编辑时，它会自动保存草稿。这可能是问题所在吗？如果是，如何解决？

这可能有效：

$("#title")
    .on(
        "input", 
        function () {
            $("#tmp-preview").html(getTweetPreview); 
        }
    );

如果其他所有方法都失败了，请尝试以下操作：

var updateTweetPreview = function () { // DRY
    $("#tmp-preview").html(getTweetPreview); 
};
$("#title")
    .one( // sic.
        "keydown", 
        function () {
            updateTweetPreview();
            $("#title").on("change", updateTweetPreview);
        }
    );

请使用on()函数进行事件。 live() 从 jQuery 1.7 源代码开始被弃用。

至于实际问题，我认为WordPress的自动保存是在自动保存完成后使用ajax将数据副本加载到表单中。这将导致您的代码的内容被覆盖。尝试将其放入：

<script type="text/javascript">
  $(document).ready(function(){
    $("#tmp-preview").html($("#title").val());
    $("#title").on("change", function(event){
        event.stopImmediatePropagation()
        $("#tmp-preview").html(getTweetPreview());
    });
  });
</script>

尝试使用 live 方法

$("#title").live('change', function(){
  $("#tmp-preview").html(getTweetPreview);
});

有关实时的更多信息，请单击此处

gettweetpreview从何而来？因为这似乎每次都有效：

$("#tmp-preview").html($("#title").val());
$("#title").change(function(){
  $("#tmp-preview").html($(this).val());
});

工作小提琴：http://jsfiddle.net/TNrPZ/

如果getTweetPreview是一个函数，那么你应该调用它，而不仅仅是引用它。代码如下所示：

$("#title").live('change', function(){
  $("#tmp-preview").html(getTweetPreview());
});

这里唯一的区别是在getTweetPreview之后包含()。

我已经看到这种情况发生了，修复它的方法是在元素上调用focus()。 尝试调用以focus()事件发生前完成的最后一件事。

您可以使用

jQuery中的 keyup 事件来更新div 的内容，而不会丢失文本框中的焦点。

试试这段代码。

$("#tmp-preview").html($("#title").val()); $("#title").keyup(function(){ $("#tmp-preview").html($(this).val()); });

相关文章：