Question

我目前正在使用wmd编辑器，稍后我将在我的网站上实现。我已经能够通过将设置更改为#wmd-preview并添加隐藏的输入字段来获取markdown div的值。问题在于JS / AJAX功能。当我在文本区域输入内容时，我得到结果回显，但当我回去并对该单词应用粗体时，它不会回显更改，直到我再次输入内容。

如果将字体样式更改应用于单词而不必再次键入，我如何获得div值？这是我的EXAMPLE

<script>
     $(document).ready(function() {
        var timer = null; 
        var dataString;   
        function submitForm(){
        $.ajax({ type: "POST",
             url: "test1.php",
             data: dataString,
             success: function(result){
        $('#wmd_result').html( $('#resultval', result).html()); 
                    }
    });
     return false;
}

 $('#wmd-input').on('keyup click', function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm, 1000);
    var wmdVal = $("#wmd-preview").html();
    dataString = 'wmdVal='+ wmdVal;
});
}); 
</script>

Answer 1

你可以尝试

$('#wmd-button-bar').click(function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm, 1000);
    var wmdVal = $("#wmd-preview").html();
    dataString = 'wmdVal='+ wmdVal;
});

Answer 2

您只是在监听#wmd-input textarea上的活动。 单击粗体按钮可能会更改该文本区域的内容，但它不是编辑事件，并且浏览器中不会触发任何事件。您没有更改文本区域，某些与按下按钮的功能正在改变它。

向.wmd-button添加点击监听器，您将能够捕获该事件。

这是一个jsfiddle，展示它是如何运作的。

修改：添加了代码示例。

您需要做的就是将.wmd-button类添加到您的jQuery侦听器中，如下所示：

 $('#wmd-input, .wmd-button').on('keyup click', function() {...

您通常需要注意监听器命令以确保您的代码在wmd样式代码之后执行，但是因为您的函数中有超时可能无关紧要。

Answer 3

如果你这样做，它确实有用单击该单词，只需将keyup和click作为事件处理程序。尝试添加change，看看是否有效。

Answer 4

也许尝试使用更改事件？

 $('#wmd-input').change(function() {
clearTimeout(timer);
timer = setTimeout(submitForm, 1000);
var wmdVal = $("#wmd-preview").html();
dataString = 'wmdVal='+ wmdVal;

}）;

Answer 5

我想提出另一种你可能想要考虑的方法。

处理事件可以变成怪物。例如 - 某人提供了以下代码行 $('#wmd-input, .wmd-button').on('keyup click', function() {...

每次单击输入字段时都会导致事件发生!! （每次要将其聚焦以进行编辑时，单击输入字段）。

不要忘记每秒都会有很多事件 - 这可能会使服务器爆炸。

更好的方法可能是设置间隔函数，此方法将从输入字段中读取值并将其与其具有的最后值进行比较。如果发生了变化 - 继续发出Ajax请求，否则什么都不做。

通过这种方式，您可以控制Ajax请求的生成速率，而且您无需担心任何事件！如果突然你有一组新的按钮，或输入字段，或popus插入图像或其他......生活就这么简单。

在不利方面 - 由于间隔较大 - 您在打字和预览之间会有延迟。

此间隔方法的伪代码如下所示

$(function(){
    var lastValue = null;
    setInterval( function(){
         var newValue =   $("#wmd-preview").html();

         if ( lastValue == null || newValue.localeCompare( lastValue ) == 0 ){
               lastValue = newValue;
               // preview code here
         }

         // else do nothing
    }, 1000 );
});

AJAX / JS：在没有页面刷新或按钮点击的情况下回显div的值

5 个答案: