Событие Click не работает должным образом

У меня проблема с событием клика:

У меня есть в 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();

            });

То есть: у меня есть кнопка ('.download-all'), при нажатии которой вызывается щелчок на других кнопках, сгенерированных динамически с помощью append (var html), которые имеют атрибут data-step=download.

Однако, когда я нажимаю кнопку .download-all, первая кнопка не получает щелчка - только первая кнопка - остальные получают....

Я ценю любую помощь

EDIT: если я поставлю $$("button[data-step='download']").click(); в консоль, клики будут работать нормально на всех кнопках....


javascript jquery html-framework-7
person Pedro Antônio    schedule 16.02.2017    source источник
comment
Не могли бы вы добавить сгенерированный html после того, как закончите добавление к .cards-clipboard?   -  person jonofan    schedule 16.02.2017
comment
Удалить из загрузки. Должно быть $$("button[data-step=download]").click();   -  person Marcelo Myara    schedule 16.02.2017
comment
@MarceloMyara все еще не работает :(   -  person Pedro Antônio    schedule 16.02.2017
comment
Еще одна модификация, которую я бы попробовал: если вы просто хотите запустить любой привязанный обработчик для события нажатия этих кнопок, я бы использовал $$("button[data-step=download]").triggerEvent('click'); вместо click()   -  person Marcelo Myara    schedule 16.02.2017
comment
это предотвратит автоматическое поведение, связанное с нажатием кнопки, и будет запускать только обработчик onClick (мне кажется, что вы привязываетесь где-то еще к этим кнопкам)   -  person Marcelo Myara    schedule 16.02.2017
comment
Та же проблема с triggerEvent... Если я вставлю $$(button[data-step='download']).click(); на консоли клики работают нормально...   -  person Pedro Antônio    schedule 16.02.2017
comment
Эй, я бы посоветовал вам сократить файлы HTML и JS до минимума, связанного с этой проблемой, и протестировать их. Если он не исчезнет, ​​загрузите его на скрипку или на свой вопрос здесь, чтобы мы могли попытаться воспроизвести. Проблема может быть в другом...   -  person Marcelo Myara    schedule 17.02.2017

Ответы (3)


arrow_upward
1
arrow_downward

Если вы используете jQuery, удалите 2 знака $ и используйте только один:

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

И ваша команда события будет:

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

        });
person Amir H. Bagheri    schedule 16.02.2017
comment
В jQuery нет разницы между $$ и $. Но я бы предложил только один, так как он стандартный. - person FibreChips; 16.02.2017
comment
Я никогда не говорил, что есть разница, но она делает код более запутанным. - person Amir H. Bagheri; 16.02.2017
comment
Потому что событие клика — это ничто. Сначала определите что-то для него, а затем, возможно, вы сможете что-то извлечь из него. - person Amir H. Bagheri; 17.02.2017

arrow_upward
1
arrow_downward

Попробуйте использовать JQuery trigger()

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

 });

Если нет, попробуйте удалить двойной знак доллара и использовать один знак доллара.

Пожалуйста, проголосуйте и отметьте решение, если оно было полезным.

Спасибо!

person Ashraf.Shk786    schedule 16.02.2017
comment
триггер (щелчок) дает мне тот же результат :( - person Pedro Antônio; 16.02.2017

arrow_upward
0
arrow_downward

Только первая кнопка срабатывает из-за порядка загрузки страницы. php выполняется перед html/javascript. Поскольку это происходит, обработчик событий не может найти кнопку с указанным идентификатором или классом. Один из способов обойти это — делегировать прослушиватель событий в область, содержащую динамически создаваемые кнопки. Например,

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