Обратитесь к идентификатору элемента динамически через Javascript

Question

Я устанавливаю идентификатор элемента, скажем, кнопки, динамически. Пример приведен ниже (код может иметь синтаксические ошибки, я просто пытаюсь объяснить свою проблему).

function myFunc(){ 
    var counter = 0; 
    return function(){ 
     counter += 1; 
     var rowContent = '<div>'; 
     rowContent += '<button type="button" class="btn btn-default" id="button"' + counter + '></button>'; 
     rowContent += '</div>'; 
     $('#someElement').append(rowContent); 
    }; 
} 

Теперь я хочу связать событие click с кнопкой. Мне нужно указать элемент ID при связывании события с кнопкой (например, $ ('# myID')). Но поскольку идентификатор устанавливается динамически, я точно не знаю, что такое идентификатор. Может ли кто-нибудь сказать мне, как я могу ссылаться на динамически заданный идентификатор элемента при связывании события с ним? Заранее спасибо!!

Answer 1

Delegate the event к исходному элементу rowContent.

$('#someElement').append(rowContent); 
$('button', rowContent).on('click', function(e) { 
    // button element in the 'rowContent' context 
} 

Делегирование его #someElement также будет работать, если вы не будете положить несколько кнопок с различных обработчиков щелчка внутри там.

Answer 2

Вы должны лучше использовать делегирование событий в таком случае:

$('#someElement').on('click','[id^=button]',function(){ 
    //do stuff 
}); 

Answer 3

Вы можете легко определить свой собственный атрибут и выберите его с помощью этого атрибута, как:

rowContent += '<button type="button" mybtn="" class="btn btn-default" id="button"' + counter + '></button>'; 

и вот селектор :

$("div[mybtn]")