2 Функции JQuery внутри события 1 щелчка

Question

На самом деле я могу сказать, что я новичок в использовании JQuery и JS. Я был чистым PHP-разработчиком, поэтому я пришел сюда и надеюсь, что вы, ребята, можете мне помочь.

То, что я хочу сделать, это всплывающее окно форма с 2 кнопками редактирования (#editar) и удалять (#eliminar)

(#editar) изменит .val() входа и (#eliminar) удалит щелкнул объект из DOM ,

Но с кодом я имею, когда я изменить в первый раз никаких проблем, тогда, когда я пытаюсь второй раз он запускает функцию дважды, 3 раза, 4 раза и так далее ...

Я правильно кодирую, чтобы добиться этого? Я имею в виду эти 2 функции внутри события click.

Я действительно одобрю ваши слова и любую предоставленную помощь.

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

    }); 

UPDATE:

РАБОЧИЙ КОД

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

Вы используете "на" с селектором, каждый раз при открытии нового всплывающего окна. т.е.

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