1

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

当字体样式更改已应用于单词而无需再次键入时，如何获得 div 值的回显？这是我的示例

<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>
4

5 回答 5

2

你可以试试

$('#wmd-button-bar').click(function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm, 1000);
    var wmdVal = $("#wmd-preview").html();
    dataString = 'wmdVal='+ wmdVal;
});
于 2012-07-31T05:21:42.647 回答
1

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

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

这是一个jsfiddle演示它如何工作。

编辑：添加了代码示例。

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

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

您通常需要注意侦听器顺序，以确保您的代码在 wmd 样式代码之后执行，但因为您的函数有超时，所以这可能无关紧要。

于 2012-07-31T05:39:45.743 回答
0

我想建议您可能要考虑的另一种方式。

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

这将在您每次单击输入字段时引发一个事件！（每次您想将其聚焦以进行编辑时，您都单击输入字段）。

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

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

通过这种方式，您可以控制发出 Ajax 请求的速率，而且您不必担心任何事件！如果你突然有了一组新的按钮，或输入字段，或插入图像的弹出窗口或其他任何东西......生活就是这样更容易。

不利的一面是——因为间隔更大——你在打字和预览之间会有延迟。

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

$(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 );
});
于 2012-08-10T22:47:34.133 回答
0

如果你点击这个词，它确实有效，只是你只有keyup和click作为事件处理程序。尝试添加change，看看是否有效。

于 2012-07-31T05:20:13.540 回答
0

也许尝试改用更改事件？

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

});

于 2012-07-31T05:21:27.110 回答