0

实际上我可以说我是大量使用 Jquery 和 JS 的新手。我是纯 PHP 开发人员，所以我来到这里，希望你们能帮助我。

我想要做的是弹出一个带有 2 个按钮编辑（#editar）和删除（#eliminar）的表单

( #editar) 将更改.val()输入的 并且 ( #eliminar) 将从 DOM 中删除单击的对象。

但是使用我第一次更改时的代码完全没有问题，然后当我第二次尝试时，它会触发该功能两次，3次，4次等等......

我编码的方式是正确的吗？我的意思是点击事件中的那两个函数。

我会非常感谢您的话和提供的任何帮助。

$("#pedido").on("click", "a.editprod", function(e){
    e.preventDefault();
    var t = $(this).attr('apeid');
    var c = parseInt($("li[lid="+t+"]").attr("cantp"));
    alert(t);
    var htmleditor = '<p>Editar Cantidad:</p><table><tr><th><a class="menos" href="#" data-theme="a" data-role="button" data-inline="true">-</a></th><th><input id="" class="cantprod" type="number" value="'+c+'"></th><th><a href="#" class="mas" data-theme="a" data-role="button" data-inline="true">+</a></th></tr></table><button id="editar" data-theme="b" >Cambiar Cantidad</button><button id="eliminar" data-theme="a">Eliminar Producto</button>';
    $("#datoseditor").html(htmleditor);
    $("#editor").trigger("create");
    $("#editor").popup("open");
        $("#datoseditor").on("click", "#editar", function(e){
            var ce = $("#datoseditor").find('input').val();
            alert(ce);
            $("li[lid="+t+"]").attr("cantp",ce);
            $('span[id="bcantp'+t+'"]').html(ce);
            $('input[data-id="'+t+'"]').val(ce);
            alert(t);
            $("#editor").popup("close");
            });
       $("#datoseditor").on("click", "#eliminar", function(e){
        $("li[lid="+t+"]").remove();
        $("#ppedidos").listview('refresh');
        $('input[data-id="'+t+'"]').remove();
           alert('Producto Eliminado!');
        $("#editor").popup("close");
    });

    });

更新：

工作代码

function ventanaEditar(){
        window.prodpedidoId=$(this).attr("apeid");
        var c=parseInt($("li[lid="+window.prodpedidoId+"]").attr("cantp"));
        var htmleditor='<p>Editar Cantidad:</p><table><tr><th><a class="menos" href="#" data-theme="a" data-role="button" data-inline="true">-</a></th><th><input id="" class="cantprod" type="number" value="'+c+'"></th><th><a href="#" class="mas" data-theme="a" data-role="button" data-inline="true">+</a></th></tr></table><button id="editar" data-theme="b" >Cambiar Cantidad</button><button id="eliminar" data-theme="a">Eliminar Producto</button>';
        $("#datoseditor").html(htmleditor);
        $("#editor").trigger("create");
        $("#editor").popup("open")}

    function editarProducto(){
        var ce=$("#datoseditor").find("input").val();
        $("li[lid="+window.prodpedidoId+"]").attr("cantp",ce);
        $('span[id="bcantp'+window.prodpedidoId+'"]').html(ce);
        $('input[data-id="'+window.prodpedidoId+'"]').val(ce);
        $("#editor").popup("close")}

    function elimProducto(){
        $("li[lid="+window.prodpedidoId+"]").remove();
        $('input[data-id="'+window.prodpedidoId+'"]').remove();
        alert("Producto Eliminado!");
        $("#ppedidos").listview("refresh");
        $("#editor").popup("close")};

    $("#pedido").on("click", "a.editprod", (ventanaEditar));
    $("#datoseditor").on("click", "#editar", (editarProducto));
    $("#datoseditor").on("click", "#eliminar", (elimProducto));
4

1 回答 1

0

每次打开一个新的弹出窗口时，您都在使用带有选择器的“on”。IE

$("#datoseditor").on("click", "#editar",
$("#datoseditor").on("click", "#eliminar"

这个版本on实际上在元素消失后很长一段时间内都会挂起，因此您可以在弹出代码之外连接它们（仅注册一次）。例如

$("#datoseditor").on("click", "#editar", function(e){
    var ce = $("#datoseditor").find('input').val();
    alert(ce);
    $("li[lid="+t+"]").attr("cantp",ce);
    $('span[id="bcantp'+t+'"]').html(ce);
    $('input[data-id="'+t+'"]').val(ce);
    alert(t);
    $("#editor").popup("close");
    });
$("#datoseditor").on("click", "#eliminar", function(e){
    $("li[lid="+t+"]").remove();
    $("#ppedidos").listview('refresh');
    $('input[data-id="'+t+'"]').remove();
       alert('Producto Eliminado!');
    $("#editor").popup("close");
});

$("#pedido").on("click", "a.editprod", function(e){
    e.preventDefault();
    var t = $(this).attr('apeid');
    var c = parseInt($("li[lid="+t+"]").attr("cantp"));
    alert(t);
    var htmleditor = '<p>Editar Cantidad:</p><table><tr><th><a class="menos" href="#" data-theme="a" data-role="button" data-inline="true">-</a></th><th><input id="" class="cantprod" type="number" value="'+c+'"></th><th><a href="#" class="mas" data-theme="a" data-role="button" data-inline="true">+</a></th></tr></table><button id="editar" data-theme="b" >Cambiar Cantidad</button><button id="eliminar" data-theme="a">Eliminar Producto</button>';
    $("#datoseditor").html(htmleditor);
    $("#editor").trigger("create");
    $("#editor").popup("open");
});
于 2013-08-11T16:32:29.257 回答