CODEWITHSUNDEEP
jquery
Karan
Karan

Reputation: 3328

Bind click handler to dynamically created anchor tags fires erroneously and only once

My case scenario is :- 

<div id="dvMyrptflyout"> Some dummy text </div>

<ul id="ulMyRpts" data-col="4" data-row="6" class="flyoutList" style="height: 194px;">
    <li class="newx column1">
       <div>All Partners&nbsp;
           <a class="ancRpt" href="#">Excel</a> | <a class="ancRpt" href="#">PDF</a> |     
           <a data-txt="All Partners" data-filetype="3" class="ancRpt">Share</a>
       </div>
    </li>
    <li class="newx column1">
       <div>Partners and Periods&nbsp;
           <a class="ancRpt" href="#">Excel</a> | <a class="ancRpt" href="#">PDF</a> | 
           <a data-txt="Partners and Periods" data-filetype="3" class="ancRpt">Share</a>
       </div>
    </li>
    <li class="newx column1">
       <div>Schedule M Ammount&nbsp;
           <a class="ancRpt" href="#">Excel</a> | <a class="ancRpt" href="#">PDF</a> | 
           <a data-txt="Schedule M Ammount" data-filetype="3" class="ancRpt">Share</a>
       </div>
    </li>
    <li class="newx column1">
       <div>test 1&nbsp;
           <a class="ancRpt" href="#">Excel</a> | <a class="ancRpt" href="#">PDF</a> | 
           <a data-txt="test 1" data-filetype="3" class="ancRpt">Share</a>
       </div>
    </li>
</ul>

Client side JQ code is as follows:-

  $(function () {
              $('#dvMyrptflyout').one("mouseover", bindShareAnc);                
  });


  function bindShareAnc() {
        $('a[data-filetype="3"]').each(function (idx, anc) {
              var $anc = $(anc);
              var name = $anc.data("txt");
              $anc.on('click', openShare(name));
        });
  }

  function openShare(rptName) {
       alert(rptName);
  }

Problem - For some reason, the alerts are getting fired on the page load. It should not fire on the page load. I want to bind the click event to the share anchor tags dynamically. But when i click the share anchor tag, nothing happens.. I guess i got meddled up with the event propagation model.

Please suggest the fix.

Upvotes: 1

Views: 67

Answers (2)

SSA
SSA

Reputation: 5493

Try this: After mouseover is fired, you click on share, it should show alert and not on page load.

$(function () {
              $('#dvMyrptflyout').one("mouseover", bindShareAnc);                
  });


  function bindShareAnc() {
        $('a[data-filetype="3"]').each(function (idx, anc) {
              var $anc = $(anc);
              var name = $anc.data("txt");
            $anc.on('click',{param:name}, openShare);
        });
  }

  function openShare(event) {
       alert(event.data.param);
  }

Demo

Upvotes: 1

Ionică Bizău
Ionică Bizău

Reputation: 113385

The code is almost correct, but inside of openShare function, you have to return a function for the click handler:

function openShare(rptName) {
    return function () {
       alert(rptName);
    }
}

That happens because, in this case, the second argument of on should be a function. In your implementation openShare opens the alert and returns undefined.

That's why openShare should return a function that contains the alert(...) call.

JSFIDDLE

Upvotes: 1

Related Questions