Question

我正在尝试设置脚本以动态更改textarea内容。

经过一些谷歌搜索，我得到了这个：

$(document).ready(function() {

    // This is a first text modification that works fine
    $('textarea#modifyme').val('Some useless text');

    // Catching a select change
    $('select#changemyvalue').bind('change keyup input',function() {
        // This alert triggers but twice
        alert('I know you want to change text');
        // This is not displaying...
        $('textarea#modifyme').val('I do not want to be display');
    });
});

第一个值设置很好，但是当选择更改检测时，它有点奇怪。警报触发两次，第二个值设置无效。

任何帮助非常感谢！感谢。

感谢您的回答我已经修复了双触发器，但仍然没有触发secon .val（'sometext'）。

我正在尝试将此应用于显示为所见即所得编辑器的textarea，我只能在加载时更改文本（首先是.val（'xx'）调用）。

我还注意到，如果我将这两行反转：

// This alert triggers now only once
alert('I know you want to change text');
// This is not displaying...
$('textarea#modifyme').val('I do not want to be display');

致：

// This is not displaying...
$('textarea#modifyme').val('I do not want to be display');
// This alert does not trigger if placed here
alert('I know you want to change text');

代码似乎在第一行中断，阻止显示“警报”。

wysiwyg编辑器的性质是否会在页面加载后阻止文本更改？

以下是html代码的简短版本：

<select name="" id="selectMe">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<textarea class="textarea callhtml5" name="changeMe" id="changeMe"></textarea>

<!-- Bootstrap WYSIHTML5 -->
<script src="path to wysihtml5 bootstrap"></script>

<script>
    $(".callhtml5").wysihtml5();
</script>

<script>
$(document).ready(function() { 
    $('textarea#changeMe').val('Initial text setup');
    $('select#selectMe').bind('change keyup',function() {
        alert('Test');
        $('textarea#changeMe').val('Final text setup');
    });
});
<script>

使用以下方法解决了这个问题：

$('.wysihtml5-sandbox').contents().find('body').html("I got you modified");

而不是这种方法：

$('textarea#changeMe').val('Final text setup');

Answer 1

这是因为keyup和input。如果绑定两个事件，则回调执行两次。

过度使用这两个bind input。您可以省略keyup。

我想提及input事件的一件事是它无法被捕获。我的意思是它不会让你捕获事件。

注意到元素是<select>元素，所以最好使用change keyup。您应该避免使用input事件，因为您没有在其中添加文本值，而是使用鼠标或键进行更改。

Answer 2

您需要从change取出input或.bind()。这两个事件都在触发，因此两次运行该函数。

希望这有帮助！：）

Answer 3

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind（）方法用于将事件处理程序直接附加到元素。 http://api.jquery.com/bind/

你可能会改变这样的代码来工作。

  $(document).ready(function() {

    $('textarea#modifyme').val('Some useless text');

    $('select#changemyvalue').on('change', 'keyup', 'input',function() {
        alert('I know you want to change text');
        $('textarea#modifyme').val('I do not want to be display');
    });

  });

编辑：而不是使用三件事，一件可以正常工作。使用input或keyup

Answer 4

您可以将event参数添加到处理程序并检查引发的事件

如下所示：首先 - input event，然后 - change event
所以你应该只选择其中一个。

这个有趣的，但似乎选择的输入事件仅在Chrome中引发。

样品：

$(document).ready(function() {

    $('textarea#modifyme').val('Some useless text');

    $('select#changemyvalue').on('change keyup input', function(e) {
    
        console.log('Now raised: '+e.type+' event');
        $("#events").append('Now raised: '+e.type+' event <br/>');
        // This is not displaying...
        $('textarea#modifyme').val('I do not want to be display');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="" id="modifyme" cols="30" rows="10"></textarea>
<select name="" id="changemyvalue">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="events"></div>

Answer 5

您在脚本中删除键盘输入

像这样试试这个Jquery

$(document).ready(function() {

$('textarea#modifyme').val('Some useless text');

$('select#changemyvalue').on('change', function(e) {

    // This alert triggers but twice
    alert('I know you want to change text');
    // This is not displaying...
    $('textarea#modifyme').val('I do not want to be display');
});
});

基本的javascript质疑

5 个答案: