Question

我有一个select元素，用户可以从中选择一个值并将其复制到textarea元素。一切都按预期工作，只是select元素的值被复制两次。

$('#cp_objs_for_goal_button').mouseup(function(){
    if ($("#cp_objs_for_goal_select").attr("selectedIndex") != 0)
    {
        console.log('selected index: '+$("#cp_objs_for_goal_select").attr("selectedIndex"));
        curr_txt = $('#pop_goal_text').val();
        console.log('curr_txt: '+curr_txt);
        added_txt = $('#cp_objs_for_goal_select option:selected').text();
        console.log('added_txt: '+added_txt);
        if (curr_txt)
        {
            new_pop_text = curr_txt + ' ' + added_txt;
        }
        else
        {
            new_pop_text = added_txt;
        }
        console.log('new_pop_text: '+new_pop_text);
        $('#pop_goal_text').val(new_pop_text);

        // TODO - This throws error:
        // $('#cp_objs_for_goal_select option').get(0).attr('selected', 'selected');
    }
})

当我点击cp_objs_for_goal_button按钮时，我从控制台日志中得到了这个....

selected index: 1
curr_txt:
added_txt: Restore geomorphic integrity
new_pop_text: Restore geomorphic integrity

selected index: 1
curr_txt: Restore geomorphic integrity
added_txt: Restore geomorphic integrity
new_pop_text: Restore geomorphic integrity Restore geomorphic integrity

这里是html：

<select id="cp_objs_for_goal_select" style="width:100%"> 
    <option>Select the Objective you would like to copy to this project:</option> 
    <option>Restore geomorphic integrity</option> 
</select> 
<div id="cp_objs_for_goal_button" class="awesome" style="border:0;">Copy</div>

Answer 1

我也确认过，这个脚本是按照预期的方式工作的。然而，该页面有大量的移动部件，我无法隔离问题。所以，我删除了jquery甚至是监听器，并在调用该方法的按钮上添加了on on on。这很好。

感谢所有输入。

Answer 2

这是Jquery中常见的Bug。你可以找到很多关于互联网的文章特别是因为事件被解雇两次。你可以试试这个

 $(document).on('click', '#task-list li', function(e)
 {
       alert('Hellow world');
       e.stopPropagation();
       return false;
 });

这肯定是Javascript问题，因为如果你点击谷歌并搜索事件火两次，你会看到Angular，Jquery和骨干等都在某个地方发射事件两次甚至三次。所以，它似乎是背后的javascript。

Answer 3

检查javascript事件冒泡，这是我找到的第一个链接http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm

通常event.preventDefault（）帮助我

Answer 4

如果上述答案对您的特定情况没有帮助，请查看此jquery .click() event fires twice。您可能不小心将事件处理程序附加了两次。

Answer 5

要处理的信息很少，但如果我不得不猜测，请检查以下内容：

仔细检查您的网页上是否有类似的ID。

（确保您的表单没有相同的ID。）

Answer 6

添加event.stopPropagation()为我解决了这个问题。

以上述代码为例：

$('#cp_objs_for_goal_button').mouseup(function(event){
   //handler code...
   event.stopPropagation();
});

请注意，jQuery事件参数已添加到处理函数中。

jquery事件发生两次

6 个答案: