Как динамически присваивать имена идентификаторам <input> и значениям селектора

0

В настоящее время я просматриваю список и добавляю эту информацию следующим образом. Я хочу использовать информацию "ID" из этого списка и отправлять эту информацию на URL-адрес каждый раз, когда я нажимаю кнопку "Paid". Это работает в настоящее время, когда я жестко кодирую селектор как "# input1" и значение id как идентификатор [0].

Это не сработает, если у меня будет второй набор информации с новым идентификатором и новой кнопкой, которая будет сочетаться с ним во время добавления, вторая кнопка также будет иметь вход id1.

Есть ли способ динамически давать разные имена имен каждой кнопке при каждом цикле, сопоставлять ее с номером идентификатора списка и способом предоставления информации селектору в зависимости от того, какая кнопка нажата?

Или есть лучший способ сделать это? Пожалуйста посоветуй. Благодарю.

var identity = [];
var count = 0;

$.getJSON("http://website.com/public/user/listunpaidbills/",function(data){
        //Loop for each element on the data
        $.each(data,function(elem){
            var wrap = $("<div/>").attr('data-role', 'collapsible');
            count++;
            identity.push(data[elem].id); 
            //Create the h1 and the other elements appending them to bills List
            $("<h1/>",{
                text:data[elem].reference
            }).appendTo(wrap);   
            $("<p/>",{
                text:"Account: "+ data[elem].account
            }).appendTo(wrap);        
            $("<p/>",{
                text:"Amount: "+ data[elem].amount
            }).appendTo(wrap);
            $("<input type='submit' value='Paid' id='input1'/>",{
                text:"Paid"
            }).appendTo(wrap);
            wrap.appendTo('#unpaidList');             
        })//end of for each loop 
        $( "#unpaidList" ).collapsibleset( "refresh" );
    })

        $("#input1").click(function(){
          $.getJSON("http://website.com/public/user/confirmbill/", {
                id: identity[0] 
                }, function(data) {
                    alert(data.status);
                }).fail(function() {
                    alert("error");
            })
        });
Теги:

2 ответа

1
Лучший ответ

Если вы правильно поняли, ваше самое простое решение было бы

добавьте класс на свой вклад, чтобы выбрать его

добавьте атрибут данных к одному и тому же входу, чтобы определить, какой идентификатор [] вам нужен.

$("<input type='submit' value='Paid' id='input1'/>",{
     text:"Paid"

становится

$("<input type='submit' value='Paid' />",{
     class:"myinput", 
     text:"Paid"
   }).appendTo(wrap)
   .data('identityindex',count)

а также

    $("#input1").click(function(){
      $.getJSON("http://website.com/public/user/confirmbill/", {
            id: identity[0]

становится

    $(".myinput").click(function(){
      var $this = $(this);
      var index = parseInt($this.data('identityindex')); 

      $.getJSON("http://website.com/public/user/confirmbill/", {
            id: identity[index]

Надеюсь, это поможет.

Поделиться
  • 0
    Могу ли я проверить, что это делает? я должен объявить отдельную переменную для этого? данные: { 'identityindex': число},
  • 0
    Ваш код имеет смысл, но как я получаю ошибку проверки. Кажется, проблема заключается в этой строке: id: identity [$ this.data ('identityindex')]
Показать ещё 5 комментариев
0

Пока вы добавляете кнопку с ответом Json. если вы хотите сделать идентификатор динамическим, тогда в это время вам нужно привязать функцию нажатия к этой кнопке, попробуйте:

$.getJSON("http://website.com/public/user/listunpaidbills/",function(data){
        //Loop for each element on the data
        $.each(data,function(elem){
            //your code 
            var dynamicId = "input2";//local variable of dynamic button

            $("<input type='submit' value='Paid' id='"+dynamicId+"'/>",{
                text:"Paid"
            }).appendTo(wrap);
            wrap.appendTo('#unpaidList');

//binding click event to created button

$("#input1").bind('click',function(){
          $.getJSON("http://website.com/public/user/confirmbill/", {
                id: identity[0] 
                }, function(data) {
                    alert(data.status);
                }).fail(function() {
                    alert("error");
            })
        });



        })//end of for each loop 
        $( "#unpaidList" ).collapsibleset( "refresh" );
    })
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню