jquery / ajax中的单击事件删除现有附加

Question

我在 jquery 点击事件之后遇到了页面刷新问题。

以下内容是通过 ajax 加载的，因此在初始页面加载时不存在。

我也在使用 ajax 来获取一个 json 数组以添加到选择中。

当一个点击事件被触发时，一切正常，但如果另一个按钮被点击，第一个选择的附加选项消失，它返回到预附加状态。

所有输入都在表单之外。

<select name="frombox" id="frombox" form="newjob_form">
<option value="1">cats</option>
<option value="2">dogs</option>
<option value="3">mice</option>
</select>

<select name="tobox" id="tobox" form="newjob_form">
<option value="1">cats</option>
<option value="2">dogs</option>
<option value="3">mice</option>
</select>


<input id="showallfav" name="showallfav" onclick="return false" title="All Favourites" type="button"  class="showallfav" />

<input id="showallfavto" name="showallfavto" onclick="return false" title="All Favourites" type="button"   class="showallfav" />

<script type="text/javascript" charset="utf-8">

        var toAppendto = "";
        var toAppend = "";


    $(function () {


        $(document).on("click", "#showallfav", function (event) {
            event.preventDefault();
            event.stopPropagation(); 
            $.ajax({
                type: "POST",
                url: "ajaxallfav.php",
                async: false,
                dataType: "json",
                success: function(data){
                    $.each(data, function () {
                        toAppend += "<option value=" + this.oV + ">" + this.oD + "</option>";
                    });
                         return false;
                }
            });
            $("#frombox").append(toAppend);
               return false;
        });

        $("#showallfavto").live('click', function (event) {
            event.preventDefault();
            event.stopPropagation(); 
            $.ajax({
                type: "GET",
                url: "ajaxallfav.php",
                async: false,
                dataType: "json",
                success: function (data) {
                    $.each(data, function () {
                        toAppendto += "<option value=" + this.oV + ">" + this.oD + "</option>";
                    });
                         return false;
                }

            });
            $("#tobox").append(toAppendto);
               return false;
                event.preventDefault(); 
        });
    });
    </script>

---

感谢所有想法！

我尝试设置一个 jsfiddle，但努力复制来自 ajaxallfav.php 的 ajax 返回！

提前致谢， 史蒂夫

Answer 1

在添加新变量之前尝试重置 toAppendTo 变量。例如：

..
success: function (data) {
   toAppendto = ""; // Add this.
   $.each(data, function () {
     toAppendto += "<option value=" + this.oV + ">" + this.oD + "</option>";
   });
   return false;
}
..