jQuery事件触发两次。

Question

我有一个选择元素，用户可以从中选择一个值并将其复制到文本区域元素。除了选择元素的值被复制两次之外，一切都按预期工作。

$('#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>

- user290043

---

我能看到这个页面吗？当jQuery本身加载两次时，我遇到过这样的情况。 - rob - not a robber

为什么要使用“mouseup”而不是“click”？ - Tim Büthe

@Eric - 你能发一下 #cp_objs_for_goal_button 元素周围的 HTML 吗？如果一个事件处理程序被分配给父级和子级的事件，这种情况经常会发生。例如，看看这个 fiddle（单击任何位置，得到 1 个警报；单击链接，得到 2）：http://jsfiddle.net/QLVhr/ - James Allardice

詹姆斯，我已经将HTML代码添加到原始帖子中。 - user290043

我曾经遇到过同样的问题，结果发现是事件传播问题。我正在使用事件委托，并且父选择器类在传播链中存在两次，因此它会触发两次。但是一旦我删除了父选择器类，使得整个页面只剩下一个，它就恢复正常并且只触发一次。 - Saad A

Answer 1

这是 JQuery 中常见的一个 Bug。在互联网上可以找到很多关于事件被触发两次的文章，特别是在 Stack Overflow 上。你可以尝试以下方法：

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

这绝对是JavaScript的问题，因为如果你在Google上搜索事件触发两次，你会发现Angular、Jquery和backbone等都在某个地方触发了两次甚至三次事件。所以，似乎是JavaScript导致了这个问题。

- Airy

Answer 2

我已确认，脚本在隔离环境中按预期工作。然而，该页面有大量的移动部件，我无法确定问题所在。因此，我删除了jquery事件监听器，并在按钮上添加了一个onclick调用该方法。这样可以正常工作。

感谢您提供的所有意见。

- user290043

---

如果我需要根据情况使用 Jquery 添加事件，我该怎么做？ - Raed Alsaleh

Answer 3

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

通常，event.preventDefault()可以帮助我解决问题。

- max4ever

Answer 4

在编程中，使用event.stopPropagation()解决了我的问题。

以上述代码作为示例：

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

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

- Rob Willis

Answer 5

提供的信息很少，但如果我必须猜测的话，请检查以下内容：

仔细检查您的页面上是否有相似的ID。

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

- Marc Uberstein

---

谢谢Marc。我已经检查过了。并且，没有重复的id。 - user290043

此外，检查是否有两个不同的事件处理程序。 - user290043

请检查我的链接。http://jsfiddle.net/NdKBu/。我用alert替换了console log...但是alert只触发了一次。这可能是你页面上的其他问题。 - Marc Uberstein

如果可以的话，请在 jsfiddle 上提供一个基本示例，展示您遇到问题的情况。（我知道该页面仍在开发中） - Marc Uberstein

Marc，我打算尝试将所有的HTML和JS复制到一个单独的文件中，看看能做到什么程度。谢谢。 - user290043