Question

我的案例场景是： -

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

客户端JQ代码如下： -

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

问题 - 出于某种原因，警报会在页面加载时触发。它不应该在页面加载时触发。我想动态地将click事件绑定到共享锚标签。但当我点击共享锚标签时，没有任何反应..我想我已经加入了事件传播模型。

请建议修复。

Answer 1

代码几乎是正确的，但在openShare函数内部，您必须为单击处理程序返回一个函数：

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

这种情况发生的原因是，在这种情况下，on的第二个参数应该是一个函数。在您的实施中openShare打开警报并返回undefined。

这就是为什么openShare应该返回包含alert(...)调用的函数的原因。

JSFIDDLE

Answer 2

试试这个：点击鼠标悬停后，点击共享，它应该显示警告，而不是页面加载。

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

将点击处理程序绑定到动态创建的锚标记只会错误地触发一次

2 个答案: