0

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

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

click 函数中的最后一个 ajax 请求#temp用于使用新创建的模板更新下拉列表，问题是当我单击保存模板时；ajax 请求成功执行并更新了下拉列表，但是发生了一些事情，那就是 select 的更改功能不再起作用了！有谁知道问题出在哪里？

4

3 回答 3

3

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

解决方案：使用 jQueryon

改变

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

至

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

jQuery on 从1.7+版本开始可用，如果您使用的是以前版本的 jQuery，请考虑使用delegate.

于 2012-07-31T22:24:06.490 回答
1

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

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

这是说，“下拉刷新后，也刷新事件。”

我希望这有帮助。

于 2012-07-31T22:29:37.190 回答
1

如果您使用 Ajax 重写选择，您应该使用 .delegate() 而不是简单的 .change，例如：

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

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

于 2012-07-31T22:24:37.127 回答