dongmu3187 2012-07-31 22:19 采纳率: 0%
浏览 35
已采纳

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

I want to implement simple functionality to allow users to save their message text as template to be used in the future.

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>";

the last ajax request in #temp click function is used to updated the droplist with the newly created template, the problem is that when i click save template; ajax request is performed successfully and droplist is updated, however something wired happen which is that the change function of select is not working anymore! anyone knows where's the problem?

  • 写回答

3条回答 默认 最新

  • dongqiu7365 2012-07-31 22:24
    关注

    Because ajax will inject new elements to your DOM and those elements don't know about the binding you already defined.

    Solution : use jQuery on

    Change

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

    to

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

    jQuery on is available from 1.7+ version onwards, if you are using a previous version of jQuery, consider using delegate.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制