$(element).on('click', 'ajax_element', function(...)) Event on button click fires twice

$(element).on('click', 'ajax_element', function(...)) Event on button click fires twice

Hello ppl,


I need help with an on() click event that is fired twice after clicking an input type button.

The HTML:

  1. <div class="msctreemain" id="msctreemain">
  2. <input type="button" class="mscbtnscrolldown fRight" id="btn_navsubtree" dyn-param="someParam" dyn-param-1="someFurtherParam" />
  3. </div>
  4. <div id="navsubtree" class="mscdisplaynone"></div>

The script:

  1. $(document).ready(function() {
  2.     $("div").on("click", "#btn_navsubtree", function(event) {
  3.         var param = $(this).attr("dyn-param");
  4.         var param1 = $(this).attr("dyn-param-1");
  5.         var url = "myTemplate.cfm?type=2&fuseaction=" + param1 + "&id=" + param;
  6.         var ele = $("#navsubtree" + param);
  7.         loadContent(ele,url,ele);
  8.     });
  9. });

The explanation:

- the HTML content was loaded via ajax into another DIV so I use the on() event to trigger a click on an element loaded via ajax, "btn_navsubtree" in this case
- when I click on the button "btn_navsubtree" the event is fired twice so the div (id=navsubtree) opens and closes immediately

How can I prevent the event from fired twice?

BTW: It doesn't matter if I use an input type button or an img to click on. I suppose it has to do with the initialy given element, $("div")...in this case. It looks like the script recognize to clicks, one on the div and the second one on the button. Correct me pls if I am not right.

Thank you all in advance.

Greetings
WulleBulle