当元素html替换为以下元素时，jQuery selectors和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+"'>");

在jQuery的文档

另外，只需更改输入框上的ID即可与Orignial显示元素不同。所以你在哪里

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

切换到

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

当然，在第二个区块中更改您的选择。

Answer 2

这是在加载DOM时未存在的输入的问题。因此，您需要做的是在$(document).on('click', ...部分上更改：

//update customer data
    $(document).on('click','#update_customer_info',function(event){
        if ($(event.target).prop('id') === 'edit_customer_name') {
            var shipmentid = $(event.target).attr('value');
            var customername =  $('#edit_customer_name'+shipmentid);
        }
    ...
    });

对于每个字段。这样，元素ID通过冒泡验证。

来自JQuery手册：

...考虑在已经绑定上述侦听器之后添加新锚时会发生什么：

// Add a new element on to our existing list
    $( "#list" ).append( "<li><a href='http://newdomain.com'>Item #5</a></li>" );

如果我们要单击新添加的项目，则不会发生任何事情。这是因为我们先前附加了直接绑定的事件处理程序。在调用.on（）方法时，直接事件仅附在元素上。在这种情况下，由于我们的新锚点不存在。

var customernameval  = document.getElementById("edit_customer_name").value;
var customerphoneval = document.getElementById("edit_customer_phone").value;
var customerfaxval   = document.getElementById("edit_customer_fax").value;
var customeremailval = document.getElementById("edit_customer_email").value;