Question

我正在尝试实施评论部分，按下按钮后我想用ajax更新评论部分，这样页面就不必刷新...

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

所以，如果有50个评论，那么还有50个答案字段，每个答案字段为1个......

除了一件事以外，每件事都有效...... - 或者我将按钮和字段的所有ID命名为相同名称（即.id =＆＃34; sendAnswer＆＃34;和id =＆＃34; answer＆＃34;，id =＆＃34; userID＆＃34;，...）然后只有第一个工作...
- 或者我动态地命名它们（即id =＆＃34; sendAnswer（echo $ i）），从而将它们命名为id =＆＃34; sendAnswer0＆＃34;，＆＃34; sendAnswer1＆＃34;，＆＃34 ; sendAnswer2＆＃34;，...然后我也为textarea和隐藏字段执行此操作（即.id =＆＃34; answer（echo $ i），id =＆＃34; userID（echo $ i）， ...）

这也很有效......除了现在我必须为每个人制作一个jQuery脚本......因为它们是动态创建的，这很难 - 随着更多评论的出现，有多少变化在...

方法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-number +＃comment-number命名它才能工作......并且有一组无限的数字可供选择0-（无限） - 这就是＆＃39; s不可行......

如果有兴趣......
动态创建问题按钮和字段的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 .OR。第二个使用选择器ID以[id^="something"]开头..并且在两种方式中您都需要使用$(this)来引用相同的部分..对我而言，使用.load()刷新整个评论部分，您可以直接获取特定评论并将其附加到#commentDiv

在这种情况下使用$("#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('');
            }
        });
    });
});

注意：使用包含两者的div id / class更改.BigDiv commentDiv和评论部分

Answer 2

使用您当前的方法，使用id标识所有内容时，最佳选择是使用event delegation。在页面加载时存在的某个父元素上只创建一个事件处理程序，通过委托将处理任何按钮 - 现有和将来。处理程序触发后，您可以确定要使用的元素集，并继续正常运行。

以下是一个示例，使用body作为父级，但您可以使用包含所有当前和未来按钮/输入的任何元素，例如，您可能有父<div id="something">。这也假设您的按钮输入是实际的button元素，如果情况并非如此，您必须进行调整：

$(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

与上面链接的the article一样，the jQuery .on() docs对事件委派有很好的描述（请参阅＆＃34;直接和委派事件＆＃34;）。

更新

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

例如，您的HTML可能如下所示：

<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

使用ajax多个动态创建的具有相同名称的按钮

2 个答案:

更新