点击事件无法正常运作

时间:2017-02-16 19:23:59

标签: javascript jquery html-framework-7

我遇到点击事件的问题:

我有HTML:

<div class="content-block cards-clipboard">
                        <a class="download-all">Download All</a>

                        </div>

和JS:

var html = '<div class="card demo-card-header-pic data-url='+img+'">'+
  '<div style="background-image:url('+thumb+'); background-size: 100%; height: 272px; background-repeat: no-repeat;" valign="bottom" class="card-header color-white no-border">'+html_icone_camera+'</div>'+
  '<div class="card-content">'+
    '<div class="card-content-inner">'+
     '<p class="color-gray">Postado em '+datapub+'</p>'+
      '<p>'+legenda+'</p>'+
    '</div>'+
  '</div>'+
  '<div class="card-footer-'+id_link+'">'+
    '<button data-url='+img+' data-step="download" data-cod='+id_link+' type="button" class="download-imagem btn btn-primary btn-lg btn-block '+id_link+'"><i class="fa fa-download" aria-hidden="true"></i>&nbspDownload</button>'+
  '</div>'+
'</div>';

$$(html).appendTo('.cards-clipboard');  

触发器:

$$('.download-all').on('click', function() {
                $$("button[data-step='download']").click();

            });

那就是:我点击了一个按钮(&#39; .download-all&#39;),通过具有数据步骤的append(var html)动态生成的其他按钮触发点击=下载属性。

然而,当我点击.download-all按钮时,第一个按钮没有收到点击 - 只有第一个按钮 - 其他按钮,接收....

我感谢任何帮助

编辑:如果我将$$("button[data-step='download']").click();置于控制台中,则所有按钮中的点击都可以正常工作....

3 个答案:

答案 0 :(得分:1)

如果您使用的是jQuery,请删除2个$符号,只有一个:

Object {value: 1, done: false}
Object {value: "ret2", done: false}

你的事件命令是:

$(html).appendTo('.cards-clipboard');  

答案 1 :(得分:1)

尝试使用JQuery trigger()

 $$('.download-all').on('click', function() {
            $$("button[data-step='download']").trigger("click");

 });

如果没有尝试删除双美元符号并使用单一美元符号。

如果有用,请投票并标记解决方案。

<强>谢谢!

答案 2 :(得分:0)

由于页面加载顺序,仅触发第一个按钮。 php在html / javascript之前执行。因为发生这种情况,事件处理程序找不到具有指定id或类的按钮。避免这种情况的一种方法是将事件侦听器委托给包含动态创建按钮的区域。例如,

$('#myId').delegate('button','click',function() {
       //do something
});