我有几个包含编辑按钮的地址字段。在编辑按钮上单击特定地址时,应显示一个窗口弹出窗口,其中包含当前地址详细信息,单击更新按钮,应该更新该地址。
这是我的代码:
$('#btnShippingAddr1').on('click',function(){
getEditableAddr('#btnShippingAddr1','#editableShippingAddress1');
updateAddress();
});
$('#btnShippingAddr2').on('click',function(){
getEditableAddr('#btnShippingAddr2','#editableShippingAddress2');
});
$('#btnBillingAddr').on('click',function(){
getEditableAddr('#btnBillingAddr','#editableBillingAddress');
});
$('#btnPaymentDetails').on('click',function(){
getEditableAddr('#btnPaymentDetails','#editablePaymentDetails');
});
function getEditableAddr(btnId,addrContainer){
$('#orderDetailAdrressPopup').show();
var getAddress = $(btnId).parent('td').find(addrContainer).html();
$('.update-editable-address').html(getAddress);
}
$('#orderDetailAdrressPopup address').bind('dblclick', function(){
$(this).attr('contentEditable',true);
}).blur(function() {
$(this).attr('contentEditable', false);
});
<td id="editableShippingAddress1Container">
<div class="editable-address" id="editableShippingAddress1">
<address>$10 - Standard Shipping</address>
</div>
<input type="button" class="btn btn-inverse btn-edit" id="btnShippingAddr1" value="Edit"/>
</td>
<td id="editableShippingAddress2Container">
<div class="editable-address" id="editableShippingAddress2">
<address>
<strong>Oodles</strong>
<br>
E-307 second flor
<br>
Shushant Lok
<br>
Guragon
<br> <abbr title="Phone">Phone:</abbr>
0124-2346067
</address>
<address>
email: <a href="mailto:#">marko@modelcitizen.com</a>
</address>
</div>
<input type="button" class="btn btn-inverse btn-edit" id="btnShippingAddr2" value="Edit"/>
</td>
<td class='hidden-350' id="editableBillingAddressContainer">
<div class="editable-address" id="editableBillingAddress">
<address> <strong>Oodles</strong>
<br>
E-307 second flor
<br>
Shushant Lok
<br>
Guragon
<br> <abbr title="Phone">Phone:</abbr>
0124-2346067
</address>
</div>
<input type="button" class="btn btn-inverse btn-edit" id="btnBillingAddr" value="Edit"/>
</td>
<td class='hidden-1024' id="editablePaymentDetailsContainer">
<div class="editable-address" id="editablePaymentDetails">
<address>
MasterCard ***1234
<br />
Expires: 11/2015
<br />
Marko Milicevic
</address>
</div>
<input type="button" class="btn btn-inverse btn-edit" id="btnPaymentDetails" value="Edit"/>
</td>
<%-- Editable Address details (popup) --%>
<div aria-hidden="false" role="dialog" tabindex="-1" class="modal modal_popup pos-fix" style="display:none;" id="orderDetailAdrressPopup">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h3>XYZ address container name</h3><!-- dynamically change name -->
<!-- Popup style table container -->
<div class="row-fluid">
<div class="span12">
<div class="box box-color box-bordered">
<div class="box-title">
<h3>
<i class="icon-edit"></i>
</h3>
</div>
<div class="box-content">
<address class="update-editable-address">
<!-- get editable address and update here -->
</address>
</div>
</div>
</div>
<div class="pull-left mb0 pt20">
<input type="button" class="btn btn-inverse update-address" value="Ok" />
<input type="button" class="btn" value="Cancel" />
</div>
</div>
</div>
</div>
<%-- Editable Address details (popup) end --%>
但问题是,我无法识别和更新特定编辑按钮点击时出现的弹出数据。我要保存更新的地址。
感谢你。