获取使用jquery动态创建的兄弟输入的值

时间:2014-09-12 10:25:10

标签: jquery input siblings

我有一个ajax返回值,它是一个json数组。然后我使用.each()将值附加到表中。我在每行中都包含一个按钮来选择特定的行。如何获取兄弟'editTemplateId'的值以选择该特定行。

继承人的代码

ajax call

   $.ajax({
        url: '/php-list/ajax/',
        type: 'POST',
        data: {method: 'loadTemplatesGrid'},    
        dataType: 'json',                         
        success: function(data){                 
            $("#templatesGridTable").find("tr:gt(0)").remove();                            

            $.each(data, function(i, item) {  
                $('#templatesGridTable > tbody:last').append('<tr><td id="templateTitle"><h4>'+item.d+'</h4></td><td><form method="post"><input type="text" name="editTemplateId" id="editTemplateId" value="'+item.a+'"><input type="button" class="submit" type="button" id="editTemplate" name="editTemplate" value="Edit Template" onclick="editTemplateClick();"></form></td></tr>');                
            });  
        }
  });

jquery函数

这只是警告空白消息

function editTemplateClick(){  
    alert($(this).siblings('#editTemplateId').val());
}

这个只是警告顶行ID值

function editTemplateClick(){  
    alert($('#editTemplateId').val());
}

这也只是提醒空白消息

 function editTemplateClick(){  
    alert(  $(this).parent().find('#editTemplateId').val() );
 }

任何帮助非常感谢

2 个答案:

答案 0 :(得分:0)

您在for循环中使用了ID editTemplateId,这将生成多个inputs相同的ID。

根据W3C规则,id应该是唯一的。

尝试使用类而不是id,这可能会解决您的问题。

这是更新的fiddle

另外为了更安全的一面使用下面的代码

    //For dynamically added elements
    $(document).on('click','.editTemplate', function () {
        alert($(this).parent().find('.editTemplateId').val());
    });

答案 1 :(得分:0)

 $(document).ready(function () {
  $('#templatesGridTable').click(function (event) {
    alert($(event.target).prev().val());
  });
 });

自己找到答案