使用ajax动态创建多个同名按钮

Question

我试图实现一个评论部分，按下按钮后，我想用ajax更新评论部分，这样页面就不必刷新了...

在这个评论部分，我有一个textarea 1按钮，每个评论都有几个隐藏字段，用户可以回答特定的评论。。。

因此，如果有50条评论，也有50个答案字段，每个字段1条。。。

除了一件事之外，每件事都有效…
-要么我将按钮和字段的所有id命名为相同的名称（即id=“sendAnswer”和id=“answer”，id=“userID”，…），然后只有第一件事有效…
-要么我动态命名它们（即id=“sendAnswer（echo$I）），从而将它们命名为id=“sendAnswer0”、“sendAnswer1”、“sendAnswer2”", ... 然后我对文本区域和隐藏字段也这样做（即id=“answer（echo$I），id=“userID（echo$I），…）

这也很有效。。。除了现在，我必须为每个。。。因为它们是动态创建的，所以这很困难——因为随着更多评论的出现，会有多少变化。。。

方法1的代码：命名它们都一样。。。

$(document).ready(function(){
    "use strict";
    $("#sendAnswer").click(function(){
        var comment = $("#comment").val();
        var userID = $("#userID").val();
        var randomStringVideo = $("#randomStringVideo").val();
        var commentID = $("#commentID").val();
        $.ajax({
            type: "POST",
            url:'../scripts/comment.php',
            data:"comment="+comment+"&userID="+userID+"&randomStringVideo="+randomStringVideo+"&commentID="+commentID,
            success:function(){
                $("#commentDiv").load(location.href + " #commentDiv>*", "");
                $("#commentsDiv").load(location.href + " #commentsDiv>*", "");
                $("#comment").val('');
            }
        });
    });
});

正如我所说的。。。第一个很好用，其余的都没用。。。

方法2的代码：我动态命名所有值...

$(document).ready(function(){
    "use strict";
    $("#sendAnswer"+$(this).val()).click(function(){ // this +$(this).val() doesn't work, only if I put #sendAnswer3 - then the 4th works and the rest are duds etc.
        var comment = $("#comment"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
        var userID = $("#userID"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
        var randomStringVideo = $("#randomStringVideo"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
        var commentID = $("#commentID"+$(this).val()).val(); // works perfectly no matter what #sendAnswer I use
        $.ajax({
            type: "POST",
            url:'../scripts/comment.php',
            data:"comment="+comment+"&userID="+userID+"&randomStringVideo="+randomStringVideo+"&commentID="+commentID,
            success:function(){
                $("#commentDiv").load(location.href + " #commentDiv>*", "");
                $("#commentsDiv").load(location.href + " #commentsDiv>*", "");
                $("#comment"+$(this).val()).val(''); // this +$(this).val() doesn't work, only if I put #comment3 (matching the #sendAnswer)- then the 4th works and the rest are duds etc.
            }
        });
    });
});

有了这个，我必须说出每一个可能的#sendAnswer号码#评论号码，它才能工作。。。如果有一组无穷多的数字可以从0（无限）中选择，那是不可行的。。。

如果有兴趣…
动态创建相关按钮和字段的Php

.
.
.
<?php if ($_SESSION[numberOfComments] != 0) {
    for ($i=0; $i<$_SESSION[numberOfComments]; $i++) ?> // run through all comments that aren't answers to other comments
        // show comment info
        <div class="media">// answer comment box starts here
            <img class="mr-3 rounded" src="<?php $file = USER . $_SESSION['randomString'] . THUMBNAIL; if ( file_exists ( $file ) ) {echo $file; } else { echo USER . "default" . THUMBNAIL; } ?>" width="50" height="50" data-toggle="tooltip" data-placement="left" title="<?php echo $_SESSION['username']; ?>">
            <div class="media-body">
                <textarea class="form-control" rows="2" type="text" name="comment<?php echo $i; ?>" id="comment<?php echo $i; ?>" value="" placeholder="Great video!"></textarea>
                <input type="hidden" name="userID<?php echo $i; ?>" id="userID<?php echo $i; ?>" value="<?php if ( isset ( $_SESSION['id'] ) ) { echo $_SESSION['id']; } ?>">
                <input type="hidden" name="randomStringVideo<?php echo $i; ?>" id="randomStringVideo<?php echo $i; ?>" value="<?php echo $_GET['v']; ?>">
                <input type="hidden" name="commentID<?php echo $i; ?>" id="commentID<?php echo $i; ?>" value="<?php echo $_SESSION['commentID_getComment']; ?>">
                <button type="button" class="btn btn-primary float-right margin-top-5" id="sendComment<?php echo $i; ?>" value="<?php echo $i; ?>">
                    Answer
                </button>
            </div>
        </div> // answer comment box ends here
        <?php if ($_SESSION[numberOfAnswers][$i] != 0) {
            for ($j=0; $j<$_SESSION[numberOfAnswers][$i]; $j++) { ?> // run through all answer to this comment
                // show answer info
            <?php }
        }
    }
} ?>
.
.
.

Answer 1

使用当前的方法，即所有内容都用ids标识，最好的选择是使用事件委派。仅在加载页面时存在的某个父元素上创建一个事件处理程序，该事件处理程序将通过委托处理您的任何按钮-现有按钮和未来按钮。一旦处理程序启动，您就可以确定使用哪一组元素，并继续正常操作。

这里有一个例子，使用body作为父项，但您可以使用包含所有当前和未来按钮/输入的任何元素，例如，您可能有一个父项

$(document).ready(function(){
    "use strict";

    // A single event handler on body, which handles any child button
    $("body").on('click', 'button', function(event) {

        // $(this) will be the button that was clicked.  We can find its id,
        // and if your buttons all have ids like sendAnswer1, sendAnswer2,
        // sendAnswerX, we can find the X
        var id = $(this).attr('id').replace('sendAnswer', '');

        // Now we can use the X to access each of this button's matching
        // inputs etc. Again this assumes your other elements have ids like 
        // commentX.
        var comment = $("#comment" + id).val(),
            userID = $("#userID" + id).val(),
            // ... etc, rest of your code

除了上面链接的文章外，jQuery.on（）文档对事件委派有很好的描述（请参阅“直接和委派事件”）。

我觉得更简洁的另一个选择是将每个注释部分包装在div中（或者任何标识元素，这样每个注释/输入/按钮集就嵌套在其中），并且只对每个元素使用类。再次使用事件委托，您可以找到包含单击的按钮的部分，从而确定您正在使用的输入元素。

例如，您的超文本标记语言可能看起来像：

<div id="all-comments">
    <div class="comment-section">
        <textarea class="comment" name="whatever"> ... </textarea>
        <button name="button" type="submit">Post!</button>
        <!-- your hidden fields, etc -->
    </div>

    <div class="comment-section">
        ...
    </div>

    <!-- ... etc, many comment sections -->
</div>

现在你的JS看起来像这样：

$(document).ready(function(){
    "use strict";

    // A single event handler on the parent div, which handles any child button
    $("#all-comments").on('click', 'button', function(event) {

        // $(this) will be the button that was clicked.  We need to find the
        // .comment-section containing that button
        var div = $(this).closest('div.comment-section');

        // Now we can find all elements inside that particular section
        var comment = $(".comment", div).val(),
            userID = $(".userID", div).val(),
            // ... etc, rest of your code

Answer 2

两种方法...第一种使用类而不是id。或。第二次使用选择器id以[id^="某物"]开始...在这两种情况下，你都需要使用$（this）来引用同一个部分...对我来说，使用. load（）来刷新整个注释部分是一种糟糕的做法，你可以直接获取特定的注释并将其附加到#评论Div

通过使用$（“#sendAnswer”$（this）.val（））$（this）在本例中，除了您的元素之外，不引用任何内容/窗口或其他内容

$(document).ready(function(){
    "use strict";
    $('button[id^="sendAnswer"]').on('click',function(){
        var ThisIs = $(this);
        var ClosestDiv = ThisIs.closest('.media-body');
        var comment = ClosestDiv.find('textarea').val(); 
        var userID = ClosestDiv.find('[id^="userID"]').val(); 
        var randomStringVideo = ClosestDiv.find('[id^="randomStringVideo"]').val();
        var commentID = ClosestDiv.find('[id^="commentID"]').val();
        $.ajax({
            type: "POST",
            url:'../scripts/comment.php',
            data:"comment="+comment+"&userID="+userID+"&randomStringVideo="+randomStringVideo+"&commentID="+commentID,
            success:function(){
                var commentDiv = ThisIs.closest('.BigDiv').find('[id^="commentDiv"]'); // change `.BigDiv` with the div id/class which hold both commentDiv and comment section
                commentDiv.load(location.href + " #commentDiv>*", "");
                ClosestDiv.find('textarea').val('');
            }
        });
    });
});