JQuery - Як атрымаць дынамічна ствараныя падаваць ўваходныя пстрычкі

Я змагаўся так доўга з гэтай праблемай, так што я павінен спытаць вашу дапамогу. У маім бягучым праекце я павінен зрабіць дынамічна новыя кнопкі адпраўкі, але праблема ў тым, што я не магу атрымаць націск кнопак. Вось дэма, што я зрабіў.

<�Моцны> HTML

<button id="AddButton">Add Input</button>


<div> <input type="submit" name="Button[]" id="Button-0" value="Button 0">
</div>

<�Моцны> jQuery

var i = 0;

$('#AddButton').click(function() {
  ++i;
  var newInput = '<input type="submit" name="Button[]" id="Button-'+i+'" value="Button '+i+'"> 
'; $('div').append(newInput); }); $('input').click(function() { var inputID = $(this).attr('id'); alert(inputID); });

Demo http://jsfiddle.net/9pR87/71/

Я зрабіў простую адладку. Кожны ўваход прэса робіць папярэджанне, і, як вы можаце бачыць, jQuery зрабіў ўносіць ўяўленне не робіць ніякіх папярэджанняў.

1
На пытанне мільярд раз у год ...
дададзена аўтар A. Wolff, крыніца
На пытанне мільярд раз у год ...
дададзена аўтар A. Wolff, крыніца
да гэтага часу так шмат няправільных адказаў :-)
дададзена аўтар Kilian Stinson, крыніца
да гэтага часу так шмат няправільных адказаў :-)
дададзена аўтар Kilian Stinson, крыніца

14 адказы

Выкарыстоўвайце на функцыі JQuery.

Акрамя таго, дадаць клас для прыкладаемых кнопак.

$(document).on("click", ".myFavoriteClass", function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

<�моцны> JSFIDDLE

У href = "http://api.jquery.com/on/" rel = "nofollow"> дакументацыі мы знаходзім наступнае:

<�Р> .На (падзея [селектар] [дадзеныя], апрацоўшчык (объектСобытия)) </р>

Такім чынам, мы выявім кліку дакумент з наступнымі параметрамі:

  • events: "click"
  • selector: ".myFavoriteClass"

Прамыя і дэлегаваныя падзеі

Калі селектар <�моцны> прадастаўляецца </моцны>, апрацоўшчык падзеі <�моцны> называецца дэлегаваныя </моцны>. Апрацоўшчык ня выклікаецца, калі падзея адбываецца непасрэдна на звязаным элеменце, але толькі для нашчадкаў (унутраныя элементы), якія адпавядаюць селектар. jQuery бурбалкі падзея з падзеі мэтавай да элемента, да якога падлучаны апрацоўшчык (гэта значыць, унутраны для вонкавага элемента) і запускае апрацоўшчык для любых элементаў па гэтым шляху, адпаведнага селектара.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page.

Калі новы HTML ўпырскваецца ў старонку, абярыце элементы і далучаць апрацоўшчыкі падзей пасля таго, як новы HTML змяшчаецца на старонку. Або выкарыстоўвайце дэлегаваныя падзеі, каб далучыць апрацоўшчык падзей, як апісана далей.

[Чытаць далей на дакументацыі, ]

4
дададзена

Выкарыстоўвайце на функцыі JQuery.

Акрамя таго, дадаць клас для прыкладаемых кнопак.

$(document).on("click", ".myFavoriteClass", function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

<�моцны> JSFIDDLE

У href = "http://api.jquery.com/on/" rel = "nofollow"> дакументацыі мы знаходзім наступнае:

<�Р> .На (падзея [селектар] [дадзеныя], апрацоўшчык (объектСобытия)) </р>

Такім чынам, мы выявім кліку дакумент з наступнымі параметрамі:

  • events: "click"
  • selector: ".myFavoriteClass"

Прамыя і дэлегаваныя падзеі

Калі селектар <�моцны> прадастаўляецца </моцны>, апрацоўшчык падзеі <�моцны> называецца дэлегаваныя </моцны>. Апрацоўшчык ня выклікаецца, калі падзея адбываецца непасрэдна на звязаным элеменце, але толькі для нашчадкаў (унутраныя элементы), якія адпавядаюць селектар. jQuery бурбалкі падзея з падзеі мэтавай да элемента, да якога падлучаны апрацоўшчык (гэта значыць, унутраны для вонкавага элемента) і запускае апрацоўшчык для любых элементаў па гэтым шляху, адпаведнага селектара.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page.

Калі новы HTML ўпырскваецца ў старонку, абярыце элементы і далучаць апрацоўшчыкі падзей пасля таго, як новы HTML змяшчаецца на старонку. Або выкарыстоўвайце дэлегаваныя падзеі, каб далучыць апрацоўшчык падзей, як апісана далей.

[Чытаць далей на дакументацыі, ]

4
дададзена

Вам неабходна дэлегаванне падзей для дынамічна элемента

$(document).on('click','input:submit',function() {
   var inputID = $(this).attr('id');
   console.log(inputID); 
});

Demo --> http://jsfiddle.net/9pR87/76/

2
дададзена

Вам неабходна дэлегаванне падзей для дынамічна элемента

$(document).on('click','input:submit',function() {
   var inputID = $(this).attr('id');
   console.log(inputID); 
});

Demo --> http://jsfiddle.net/9pR87/76/

2
дададзена

Вы павінны выкарыстоўваць наступнае:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('div').on('click', 'input[type="submit"]', function(event) {
    event.preventDefault();
    var inputID = this.id;
    alert(inputID); 
});

Гэта будзе падключыць падзея да любога ўваходу ў DIV элемент, скарачэнне аб'ёму таго, каб праверыць ўвесь дакумент дрэва элементаў і павышэння эфектыўнасці.

<�моцны> FIDDLE DEMO

2
дададзена

Вы павінны выкарыстоўваць наступнае:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('div').on('click', 'input[type="submit"]', function(event) {
    event.preventDefault();
    var inputID = this.id;
    alert(inputID); 
});

Гэта будзе падключыць падзея да любога ўваходу ў DIV элемент, скарачэнне аб'ёму таго, каб праверыць ўвесь дакумент дрэва элементаў і павышэння эфектыўнасці.

<�моцны> FIDDLE DEMO

2
дададзена

Надзень гэта:

$('input').click(function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

Ўнутры $ ( '# AddButton') націсніце (функцыя() функцыя, у канцы, як гэта ..:

var i = 0;

$('#AddButton').click(function() {
  ++i;
  var newInput = '<input type="submit" name="Button[]" id="Button-'+i+'" value="Button '+i+'"> 
'; $('div').append(newInput); $("input").click(function() { var inputID = $(this).attr('id'); alert(inputID); }); });
2
дададзена

Надзень гэта:

$('input').click(function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

Ўнутры $ ( '# AddButton') націсніце (функцыя() функцыя, у канцы, як гэта ..:

var i = 0;

$('#AddButton').click(function() {
  ++i;
  var newInput = '<input type="submit" name="Button[]" id="Button-'+i+'" value="Button '+i+'"> 
'; $('div').append(newInput); $("input").click(function() { var inputID = $(this).attr('id'); alert(inputID); }); });
2
дададзена
$(document).on('click', 'input', function() {
    var inputID = $(this).attr('id');
    alert(inputID); 
});

Вы павінны выкарыстоўваць на </кодзе> для дынамічных генераваных элементаў для таго, каб звязаць падзея на іх.

Глядзіце гэтую абноўленую скрыпку

2
дададзена

Вы можаце выкарыстоўваць на :

 $("#Button-" + i).on("click", function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

Гэта надасць новы націсніце апрацоўшчык падзей для вашай кнопкі.

http://jsfiddle.net/9pR87/78/

You may want to use one function which you can attach $(input).click to as well as $("#Button-" + i)

Вы таксама можаце выкарыстоўваць прывязваць аднак на з'яўляецца аддавалі перавагу метад, як у jQuery 1.7

1
дададзена
Але .Ён ( "пстрычка", функцыя() {...}) робіць тое ж самае, .click (функцыя() {...}) . І .bind ( "націсніце" ... робіць тое ж самае, як .click (...
дададзена аўтар nnnnnn, крыніца

Вы можаце выкарыстоўваць на :

 $("#Button-" + i).on("click", function() {
   var inputID = $(this).attr('id');
   alert(inputID); 
});

Гэта надасць новы націсніце апрацоўшчык падзей для вашай кнопкі.

http://jsfiddle.net/9pR87/78/

You may want to use one function which you can attach $(input).click to as well as $("#Button-" + i)

Вы таксама можаце выкарыстоўваць прывязваць аднак на з'яўляецца аддавалі перавагу метад, як у jQuery 1.7

1
дададзена
Але .Ён ( "пстрычка", функцыя() {...}) робіць тое ж самае, .click (функцыя() {...}) . І .bind ( "націсніце" ... робіць тое ж самае, як .click (...
дададзена аўтар nnnnnn, крыніца

Спачатку назначце клас для ўсіх кнопак, якія вы ствараеце замест прызначэння ім той жа ідэнтыфікатар. Па-другое, выкарыстоўваць jQuery .На() функцыю, каб звязаць падзеі націску на кнопкі.

0
дададзена

Спачатку назначце клас для ўсіх кнопак, якія вы ствараеце замест прызначэння ім той жа ідэнтыфікатар. Па-другое, выкарыстоўваць jQuery .На() функцыю, каб звязаць падзеі націску на кнопкі.

0
дададзена

<�Моцны> працаваў добра для мяне

<�Моцны> Проста дадайце клас у поле ўводу, як гэта

<input type="text" class="actionClass" id="my_id1"/>
<input type="text" class="actionClass" id="my_id2"/>

<�Моцны>, а затым jQuery код павінен быць такім

$('.actionClass').bind('click',function(event){
    console.log('clicked: id ='+this.id);
});
0
дададзена