Question

实际上我可以说我是大量使用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));

Answer 1

每次打开新弹出窗口时，您都在使用选择器“on”。即。

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

此版本的on实际上在元素消失后很久就会挂起，因此您可以在弹出代码之外连接它们（仅注册一次）。 e.g。

$("#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");
});

2点击事件中的2个Jquery函数

1 个答案: