如何通过HTML和ajax中的动态按钮从动态文本框中获取文本

Question

我试图从数据库中获取数据并逐个更新记录， 我创建了一个表，我创建了一个文本输入字段和按钮，它将与记录动态构建，文本输入字段将具有前一个记录，然后我应该更改并提交它。问题是，当我尝试编辑和提交我更改的内容时，它会为所有按钮提供第一个文本输入值

这是我的Javascript代码：

$("body").delegate("a","click",function(event){
//$("#category_editing").click(function(){
event.preventDefault();
var cat_name = $("#new_cat_name").val();
//var cat_name = $(this).attr('new_cat_name');
var cat_id   = $(this).attr('cat_id');
console.log('starting ajax');
alert(cat_name);
 $.ajax({
        url : "update_cat.php",
        method: "POST",
        data  : {cat_id:cat_id,cat_name:cat_name},
        success : function(data){
           alert(data);
        }

    });
});

这是我的php和html代码：

 $category_query = "SELECT * FROM `CATEGORIES`";
    $run_query = mysqli_query($connect,$category_query);
    echo "
    <div class='nav nav-pills nav-stacked'>
  <li class='active'><a href='#'

    >Categories</a></li>";
        if(mysqli_num_rows($run_query)>0){
            while

($row = mysqli_fetch_array($run_query))
        {

            $CATEGORY_ID = $row['CATEGORY_ID'];
            $CATEGORY_NAME = $row['CATEGORY_NAME'];
            $CATEGORY_DESC = $row['CATEGORY_DESC'];
            $CATEGORY_IMAGE_PATH = $row['CATEGORY_IMAGE_PATH'];


            echo "

           <li><a class='category_editing' cat_id='$CATEGORY_ID'><input type='text' class='form-control' id='new_cat_name' value='$CATEGORY_NAME'><a href='#' class='category_editing btn btn-warning' cat_id='$CATEGORY_ID' cat_name='$CATEGORY_NAME'>Submit</a></a></li>";

        }

    }

      //}

?>

Answer 1

这就是问题所在：

var cat_name = $("#new_cat_name").val();

您应该通过锚标记的id或类似的内容访问更改的输入。您必须选择特定输入。你可以用这种方式渲染它：

cat_id='$CATEGORY_ID'><input type='text' class='form-control' id='input_$CATEGORY_ID'

尝试通过连接字符串'input'和处理程序上下文中锚文本的id来访问输入。