2

我对 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 的其他一些函数调用而发生的，因为当标题完成编辑时，它会自动保存草稿。这可能是问题吗？如果是，如何解决？

4

7 回答 7

3

这可能有效：

$("#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);
        }
    );
于 2012-07-23T05:35:39.363 回答
2

请使用on()事件功能。自 jQuery 1.7 sourcelive()起已弃用。

至于实际问题，我认为 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>
于 2012-07-20T19:03:56.847 回答
1

尝试使用 live 方法

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

更多直播信息请点击这里

于 2012-06-27T05:10:07.137 回答
0

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

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

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

于 2012-06-27T05:17:09.143 回答
0

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

试试这个代码。

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

于 2012-07-20T13:17:03.190 回答
0

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

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

这里唯一的区别是包含()after getTweetPreview。

于 2012-07-18T09:58:49.477 回答
0

我已经看到这种情况发生了，并且解决了调用 focus()该元素的问题。尝试调用事件发生之前focus()完成的最后一件事。

于 2013-04-10T13:04:02.627 回答