当在就地编辑元素上替换元素 html 时，JQuery 选择器和 val() 或 text() 似乎失败

Question

我正在尝试将显示元素切换为输入元素，以便用户可以在不刷新页面的情况下更新数据。

除了这段代码之外，一切正常

 //* values*/
        var customernameval =  customername.attr('value');
        var customerphoneval =  customerphone.attr('value');
        var customerfaxval =  customerfax.attr('value');
        var customeremailval =  customeremail.attr('value');

我尝试了 val() 和 text()，但它们也不起作用!

如何从输入中获取值，以便我可以使用 ajax 发送它!

/*Edit customer details*/

$(document).ready(function() {
    $(document).on('click','#edit_customer_info',function(){
        var shipmentid = $(this).attr('value1');

        /*selectors*/
        var customername =  $('#edit_customer_name'+shipmentid);
        var customerphone =  $('#edit_customer_phone'+shipmentid);
        var customerfax =  $('#edit_customer_fax'+shipmentid);
        var customeremail =  $('#edit_customer_email'+shipmentid);
        var Update =  $('#update_customer_info');


        //* values*/
        var customernameval =  customername.text();
        var customerphoneval =  customerphone.text();
        var customerfaxval =  customerfax.text();
        var customeremailval =  customeremail.text();

        /*remove edit button*/
        $(this).css('display','none');
        /*show update button*/
        Update.css('display','inline');

        /*append input text into the field*/
        customername.html("<input type='text' id='edit_customer_name"+shipmentid+"' value='"+customernameval+"'>");
        customerphone.html("<input type='text' id='edit_customer_phone"+shipmentid+"' value='"+customerphoneval+"'>");
        customerfax.html("<input type='text' id='edit_customer_fax"+shipmentid+"' value='"+customerfaxval+"'>");
        customeremail.html("<input type='text' id='edit_customer_email"+shipmentid+"'  value='"+customeremailval+"'>");
    });

    //update customer data
    $(document).on('click','#update_customer_info',function(){
        var shipmentid = $(this).attr('value1');

        /*selectors*/
        var customername =  $('#edit_customer_name'+shipmentid);
        var customerphone =  $('#edit_customer_phone'+shipmentid);
        var customerfax =  $('#edit_customer_fax'+shipmentid);
        var customeremail =  $('#edit_customer_email'+shipmentid);

        //* values*/
        var customernameval =  customername.attr('value');
        var customerphoneval =  customerphone.attr('value');
        var customerfaxval =  customerfax.attr('value');
        var customeremailval =  customeremail.attr('value');

        alert(customernameval);
        /*append input text into the field*/
        customername.html(customernameval);
        customerphone.html(customerphoneval);
        customerfax.html(customerfaxval);
        customeremail.html(customeremailval);

    });
});

Answer 1

我认为您的问题在于将输入框放入文档的方式。您正在使用

customername.html("<input type='text' id='edit_customer_name"+shipmentid+"' value='"+customernameval+"'>");

假设您从

开始

<div id="edit_customer_name1234">I am customer 1234</div>

然后你的代码会给你...

<div id="edit_customer_name1234">
    <input type="text" id="edit_customer_name1234" value="I am customer 1234"/>
</div>

如您所见，您有 2 个 id = edit_customer_name1234 的元素

解决方案:使用.replaceWith()

customername.replaceWith("<input type='text' id='edit_customer_name"+shipmentid+"' value='"+customernameval+"'>");

文档 here at jquery .

或者，只需将输入框上的 id 更改为与原始显示元素不同即可。那么你在哪里

    <input type="text" id="edit_customer_name1234" value="I am customer 

切换到

    <input type="text" id="input_customer_name1234" value="I am customer 

当然，请更改要遵循的第二个 block 中的选择。