jquery event fires twice

I have a select element from which the users can select a value and copy it to a textarea element. Everything works as expected with the exception that the value from the select element is copied twice.

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

When I click the cp_objs_for_goal_button button, I get this.... from the console log:

selected index: 1
cu开发者_开发问答rr_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

Here the 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>

---

This is a common Bug in Jquery. you can find many articles around internet specially on SO for event being fired twice. You can try this

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

And it's definitely Javascript problem because if you hit google and search for event fire twice you will see that Angular, Jquery and backbone etc all are somewhere firing events twice or even thrice. So, it's seem that it's javascript behind this.

---

I've confirmed too, in isolation, the script works as intended. However, the page has tons of moving parts and I couldn't isolate the problem. So, I removed the jquery even listener and added an on onclick to the button that calls the method. This works fine.

Thanks for all input.

---

Check javascript event bubbling, here is the first link i found http://www.bennadel.com/blog/1751-jQuery-Live-Method-And-Event-Bubbling.htm

usually event.preventDefault() helps me

---

Very little information to work on, but if I have to make a wild guess, check the following:

Double check that you don't have similar ID's on your page.

(Make sure your form doesn't have the same ID.)

---

Adding event.stopPropagation() resolved this problem for me.

Using the above code as an example:

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

Note that the jQuery event parameter was added to the handler function.