Question

我对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中更新每个角色的更改，我是否必须使用keydown事件或者我可以做它以某种方式改变了事件？

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

Answer 1

这可能有效：

$("#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);
        }
    );

Answer 2

请使用on()功能进行活动。自jQuery 1.7 source起，live()已弃用。

至于实际问题，我认为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>

Answer 3

尝试使用实时方法

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

有关实时Click here

的详细信息

Answer 4

gettweetpreview来自哪里？这似乎每次都有效：

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

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

Answer 5

如果getTweetPreview是一个函数，那么你应该调用它而不是仅仅引用它。代码看起来像：

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

唯一的区别是在()之后加入getTweetPreview。

Answer 6

您可以使用keyup中的jQuery事件更新div的内容，而不会忽略文本框中的焦点。

试试此代码。

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

Answer 7

我已经看到了这种情况，并且修复了调用 focus()元素的原因。尝试在事件发生之前完成调用到focus()。

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

7 个答案: