AJAX请求导致更改函数解除绑定

AJAX request causes change function unbind

本文关键字：函数 绑定 请求 AJAX      更新时间：2023-09-26

我想实现简单的功能，允许用户将消息文本保存为将来使用的模板。

php:

  echo '<div id="container">';
    $sql = ("SELECT template_id, template_text, template_name, member_id FROM message_templates
            WHERE member_id = {$member_id}");
    $result = mysql_query($sql) or die(mysql_error());
    $num_rows = mysql_num_rows($result);
    $confName = get_conference_name($confID);
    $confName = formatText_safe($confName);
    echo "<label>" . $lang['my_template'] . "</label><select id='tempchoose' name='templates'>";
    if ($num_rows == 0) {
        echo '<option value=""> ' . $lang['no_saved'] . '</option>';
    } else {
        for ($i = 0; $i < $num_rows; $i++) {
            //$template_id = mysql_result($result, $i, 0);
            $temp_text = mysql_result($result, $i, 1);
            $temp_name = mysql_result($result, $i, 2);
            echo '<option value="' . $temp_text . '">' . $temp_name . '</option>';
        }
    }
    echo "</select></div>"; 
    echo '<input id="send" name="Message" value="send" disabled="disabled" type="submit" />
<input id="temp" name="temp" type="button" value="save as template" />"
<textarea style="width: 99%;" id="textarea" name="TextBox" rows="8" disabled="disabled" type="text" value=""/></textarea>';

javascript:

$("#temp").bind("click", function(){
            name=prompt("template name?");
            temp_text = $("#textarea").val();
        if (name!=null && name!="" && name!="null") {
            $.ajax ({
                data: {temp_text:temp_text, name:name},
                type: 'POST',
                url:  'save_template.php',
                success: function(response) {
                    if(response == "1") {
                        alert("template saved successfully");
                    } else {
                        alert(response);
                    }
                }
            });
        } else {
            alert("invalid template name");
        }
         $.ajax ({
                url:  'update_templates.php',
                success: function(response) {
                    $("#container").html(response);
                }
            });
    });
 $("select").change(function () {
          $("select option:selected").each(function () {
            $("#textarea").removeAttr("disabled");
            $("#send").removeAttr("disabled");
              });
          $("#textarea").val($(this).val());
        })
        .trigger('change');

update_temp.php

$sql = ("SELECT template_id, template_text, template_name, member_id FROM message_templates
        WHERE member_id = {$member_id}");
$result = mysql_query($sql) or die(mysql_error());
$num_rows = mysql_num_rows($result);
$confName = get_conference_name($confID);
$confName = formatText_safe($confName);
echo "<label>".$lang['my_template']."</label><select id='tempchoose' name='templates'>";
if ($num_rows == 0) {
    echo '<option value=""> '.$lang['no_saved'].'</option>';
} else {
    for ($i = 0; $i < $num_rows; $i++) {
        //$template_id = mysql_result($result, $i, 0);
        $temp_text = mysql_result($result, $i, 1);
        $temp_name = mysql_result($result, $i, 2);
        echo '<option value="' . $temp_text . '">' . $temp_name . '</option>';
    }
}
echo "</select>";

#temp点击功能中的最后一个ajax请求用于用新创建的模板更新下拉列表，问题是当我点击保存模板时；ajax请求被成功执行，droplist被更新，但是发生了一些意外，那就是select的更改功能不再工作！有人知道问题出在哪里吗？

因为ajax将向DOM注入新元素，而这些元素不知道您已经定义的绑定。

解决方案：使用jQuery on

更改

$("select").change(function () {

至

$(document).on("change","select", function(){

上的jQuery从1.7+版本开始提供，如果您使用的是以前版本的jQuery，请考虑使用delegate。

如果使用Ajax重写select，则应该使用.delete（），而不是简单的.change，如：

$("someSelector").delegate("select", "change", function() {
 // do stuff...
});

其中someSelector是包含您的选择的元素。

是的，因为您已经替换了容器内部的下拉菜单，这将取消下拉菜单上的所有事件。解决方案是修改代码如下：

         $.ajax ({
            url:  'update_templates.php',
            success: function(response) {
                $("#container").html(response);
                $("#container select").change(
                   // your drop down change functionality here //
                );
            }
        });

这是在说，"在刷新了下拉列表之后，也刷新了事件。"

我希望这能有所帮助。

相关文章：