Php 不使用动态id选择器获取jquery Ajax数据

我的PHP代码如下所示-

for ($i=0;$i<=10;$i++) {
    ?>
<div id="">
    <input type="text" id="GetCommentText-<?php echo $i;?>"></input>
    <input type="hidden" id="GetPostID-<?php echo $i;?>" value="<?php echo $i;?>">
    <button type="button" id="SelectPostComment-<?php echo $i;?>" >Submit</Submit>
</div>
<?php
}
?>  
<div id="ShowAjaxesult"></div>

我想使用jquery动态id选择器获取这些元素的数据。我的jQuery看起来像-

           <script type="text/javascript" language="javascript">
            $(document).ready(function() {
               $("[id^=SelectPostComment-]").click(function(){
                   var $td = $(this).closest('input').next();
                   var CommentText = $td.find("[id^=GetCommentText-]").val();
                    var PostID = $td.find("[id^=GetPostID-]").val();

                   $.ajax( {
                      type : 'GET',
                      url:'test1.php',
                      data : {CommentText: CommentText, PostID: PostID},
                      success:function(data) {

                         $('#ShowAjaxesult').html(data);
                      }
                   });
               });
            });
            </script>

但当我点击时，我并没有得到ajax数据CommentText的价值，也并没有在test1.php文件中发布。不知道我犯了什么错误。请帮助。

试试这个：

for ($i=0;$i<=10;$i++) {
?>
    <div id="">
    <input type="text" id="GetCommentText-<?php echo $i;?>" />
    <input type="hidden" id="GetPostID-<?php echo $i;?>" value="<?php echo $i;?>">
    <button type="button" id="SelectPostComment-<?php echo $i;?>" >Submit</button>
    </div>
    <?php
}
?>
<div id="ShowAjaxesult"></div>

和js部分：

       <script type="text/javascript" language="javascript">
        $(document).ready(function() {
           $('[id^="SelectPostComment-"]').click(function(){  // changed here
               var $td = $(this).parent();  // changed here
               var CommentText = $td.find('[id^="GetCommentText-"]:first').val();  // changed here
                var PostID = $td.find('[id^="GetPostID-"]:first').val();  // changed here

               $.ajax( {
                  type : 'GET',
                  url:'test1.php',
                  data : {CommentText: CommentText, PostID: PostID},
                  success:function(data) {

                     $('#ShowAjaxesult').html(data);
                  }
               });
           });
        });
        </script>

   <script type="text/javascript" language="javascript">
    $(document).ready(function() {
       $('.submit-comment').click(function(){  
           var $parent = $(this).parent(); 
           var postId = $parent.data('postId');
           var commentText = $parent.find('input[name="commentText"]:first').val();
           $.ajax( {
              type : 'GET',
              url:'test1.php',
              data : {CommentText: commentText, PostID: postId},
              success:function(data) {
                 $('#ShowAjaxesult').html(data);
              }
           });
       });
    });
    </script>

---

或者您可以使用更有效的方法，无需在DOM树中制作垃圾：

和js部分：

       <script type="text/javascript" language="javascript">
        $(document).ready(function() {
           $('[id^="SelectPostComment-"]').click(function(){  // changed here
               var $td = $(this).parent();  // changed here
               var CommentText = $td.find('[id^="GetCommentText-"]:first').val();  // changed here
                var PostID = $td.find('[id^="GetPostID-"]:first').val();  // changed here

               $.ajax( {
                  type : 'GET',
                  url:'test1.php',
                  data : {CommentText: CommentText, PostID: PostID},
                  success:function(data) {

                     $('#ShowAjaxesult').html(data);
                  }
               });
           });
        });
        </script>

   <script type="text/javascript" language="javascript">
    $(document).ready(function() {
       $('.submit-comment').click(function(){  
           var $parent = $(this).parent(); 
           var postId = $parent.data('postId');
           var commentText = $parent.find('input[name="commentText"]:first').val();
           $.ajax( {
              type : 'GET',
              url:'test1.php',
              data : {CommentText: commentText, PostID: postId},
              success:function(data) {
                 $('#ShowAjaxesult').html(data);
              }
           });
       });
    });
    </script>

---

打开你的控制台，你有任何错误吗？您的选择器也不处理事件委派，您需要使用.on。您有一些无效语法->在@Fred I收到此错误后-'event.returnValue已弃用。请改用console.Um中的标准event.preventDefault。。。为什么叫我出来？我做了一个编辑，而不是评论。尝试更改var$td=$this。最接近的“输入”。下一步；到var$td=$this.parent；这对我有用。那么，我们真的需要使用：first吗？因为在js部分中没有使用：first就可以了。我总是编写更具体的选择器，所以如果我真的需要1个元素：first或：last，我会使用：first来避免不必要地遍历DOM树：