javascript - 调用 PHP 文件会使每次点击发送的请求量增加一倍

Question

我遇到了一个问题，导致我的网站出现严重延迟，因为在只应调用一个电话的情况下却调用了很多电话。

所以我有一个 PHP 文件，它显示数据库中的大量笔记的名称。

此文件是general_notes.php:

<div class="main-container-notes">
    <div id="left-box">
        <?php 

        echo "<div style='width: 100%;'>";

        // while ( $notename = "Excel Registers")
        while ( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC)) 
        {
            echo "<div class='hvr-bounce-to-right1 hover-cursor output noSelect' data-noteid='{$noteName['NoteID']}' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
        }

        echo "</div>";
        ?>
    </div>
    <div id="right-box">
       <?php 

       if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true)  
       {
            // include 'noteContent.php'; 
       }

       ?>
    </div>
</div>

你会在 echo 中看到 div 有一个“输出”类。然后在 scripts.js 中使用它:

$(".output").click(function () 
    {
        var noteid = $(this).data("noteid");
        var templatenoteid = $(this).data("templatenoteid");
        var variablenoteid = $(this).data("variablenoteid");
        console.log(noteid);

        if ($(this).data("noteid")) 
        {
            $("#right-box").load("noteContent.php", {noteid: noteid});
        }

        else if ($(this).data("templatenoteid")) 
        {
            $("#right-box").load("templateNoteContent.php", {templatenoteid: templatenoteid});
        }

        else
        {
            $("#right-box").load("variableContent.php", {variablenoteid: variablenoteid});
        }
    });

因此，当单击该按钮时，它将使用此 php 文件 noteContent.php 在右侧框中显示该注释的内容:

<?php

    if (isset($_POST['noteid'])) 
    {
        $showNoteInfo = "SELECT Note, NoteName FROM Notes WHERE NoteID = " . $_POST['noteid'];
        $stmt = sqlsrv_query($conn, $showNoteInfo);
    }

    if (isset($_POST['noteid'])) 
    {
        if (empty($_POST['noteid'])) 
        {
            $notes = 'No Data';
        }
        if (sqlsrv_has_rows($stmt)) 
        {
            $data = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC);

            echo "<div class='custom-font title-container'>
                    <div class='expand-button-container fa fa-expand' onclick='expandWindow()'></div>
                    <div id='title-container1'><div class='edit-note fa fa-pencil' onclick='editGeneralNote()'>&nbsp;&nbsp;&nbsp;</div>" . $data['NoteName'] . "&nbsp;<div class='save-note fa fa-thumbs-up' onclick='saveGeneralNote(); submitNoteText();'></div></div>
                  </div>";
            echo "<textarea spellcheck='false' readonly id='ta1'>" . $data['Note'] . "</textarea>";
        } 
        else 
        {
            echo "No data found";
        }
    }
?>

<script type="text/javascript">

function submitNoteText()
{
    var noteid = <?php if(isset($_POST['noteid'])){ echo $_POST['noteid'];} ?>;
    var notetext = $("#ta1").val();
    var data = {noteid1: noteid, notetext1: notetext};

    if(noteid == ''||notetext == '')
    {
        alert("NoteID or Text is blank");
    }
    else
    {   
        $.ajax({
            type: "POST",
            url: "submitNoteText.php",
            dataType: 'json',
            data: data,
            cache: false,
            success: function(result){
                alert("Success");
            }
        });
    }
    return false;
};

</script>

但是，每次我单击显示注释时，它都会显示该注释并进行以下调用:

但是，我再次单击，调用次数就会增加一倍。

到第七次点击时，它已对 noteContent.php 进行了 64 次调用

为什么每次我点击笔记名称时，对 noteContent.php 的调用量都会增加一倍？

PS。如果这不是最好的措辞，我深表歉意，我不确定如何解释发生的事情，这也使得当我不确定要搜索什么时很难搜索解决方案。

Answer 1

这听起来像是一个事件绑定(bind)问题。事件绑定(bind)可能发生多次(即多个事件绑定(bind)到同一元素)。为了避免这种情况，请考虑使用事件委托(delegate)并在创建绑定(bind)之前调用 .off()。见下文:

$(".main-container-notes").off('click.note-click').on('click.note-click', '.output', function () 
    ...
    // Other Code
    ...
});

请注意 click 事件旁边的 .note-click。这是一个事件命名空间。 jQuery 允许您提供事件命名空间，以便您可以删除特定事件，而无需删除所有附加的点击事件。如果您有多个分配事件的插件或代码片段，这会很有帮助。它可以防止您与其他功能发生冲突。

引用: .on() , .off()