Ajax:如何将变量函数传递给另一个jQuery
问题描述:
我一直在尝试使用变量作为选择器,但它仅限于一个函数,如何将该变量值传递给其他函数。我是新来的Ajax,请帮我解决这个问题。Ajax:如何将变量函数传递给另一个jQuery
我试过本地存储,但那也不起作用。
这里是我的HTML代码:
<td class="info-group jname">
<p class="pro-info-right text-per jname"><?php echo $jsdata['js_fname']; ?></p>
<div class="edit jname" style="display:none">
<input class="editbox jname" name="js_fname_edit" value="">
</div>
<?php if($this->user_valid == TRUE) { ?>
<a href="#"><span title="Edit" class="edit-icon jname ctrl glyphicon glyphicon-pencil"></span></a>
<a href="#"><span title="Delete" class="del-icon ctrl glyphicon glyphicon-remove-sign"></span></a>
<?php } ?>
</td>
<td class="info-group jaddr">
<p class="pro-info-right text-per jaddr"><?php echo $jsdata['js_address']; ?></p>
<div class="edit jaddr" style="display:none">
<input class="editbox jaddr" name="js_fname_edit" value="">
</div>
<?php if($this->user_valid == TRUE) { ?>
<a href="#"><span title="Edit" class="edit-icon jaddr glyphicon glyphicon-pencil"></span></a>
<a href="#"><span title="Delete" class="jaddr del-icon glyphicon glyphicon-remove-sign"></span></a>
<?php } ?>
</td>
的JavaScript:
$(document).ready(function(){
var slctd;
$('.info-group').click(function(e) {
e.preventDefault();
slctd = ($(this).attr('class').split(' ')[1]);
$('.'+ slctd +' .text-per').hide();
$('.'+ slctd +' .ctrl').hide();
var data = $('.'+ slctd +' .text-per').html();
$('.'+ slctd +' .edit').show();
$('.'+ slctd +' .editbox').val(data);
$('.'+ slctd +' .editbox').focus();//comming up to here
});
$('.'+ slctd +' .editbox').mouseup(function(e) {
e.preventDefault();//not comming here
return false;
});
$('.'+ slctd +' .editbox').change(function(e) {
alert(slctd);//not comming here
e.preventDefault();
$('.'+ slctd +' .edit').hide();
var js_address = $('.'+ slctd +' .editbox').val();
var dataString = 'js_address='+ js_address;
$.ajax({
type: "POST",
url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>"+'_'+ slctd +'',
data: dataString,
cache: false,
success: function(html) {
$('.'+ slctd +' .text-per').html(js_address);
$('.'+ slctd +' .text-per').show();
}
});
});
$(document).mouseup(function(e) {
e.preventDefault();//not comming here
$('.'+ slctd +' .edit').hide();
$('.'+ slctd +' .text-per').show();
$('.'+ slctd +' .ctrl').show();
});
});
答
这是写在其它风格相同的代码。这是更高效和更好的代码。
基本上slctd
只不过是.info-group
元素,您可以使用上下文选择器通过传递选择器来选择点击td
中的元素。
$(document).ready(function() {
// When clicked on the element having class info-group
$('.info-group').on('click', function (e) {
e.preventDefault();
var $this = $(this); // Cache the context for performance
$this.find('.text-per, .ctrl').hide(); // Hide the elements inside the clicked td matching the classes
var data = $('.text-per', this).html(); // This is context selector, passing this here will search for .text-per element inside the this i.e. td element
$('.edit', this).show();
$('.editbox', this).val(data).focus(); // You can chain methods here
}).on('mouseup', '.editbox', function (e) {
// when mouseup of .editbox inside the .info-group
return false; // preventDefault is not needed when using return false
}).on('change', '.editbox', function (e) {
var parentTd = $(this).closest('.info-group'); // Get the parent <td> object, so that this can be used as context for selecting the elements inside it
$('.edit', parentTd).hide(); // Hide .edit element inside the td
var value = $('.editbox', parentTd).val();
var dataString = $('.editbox', parentTd).attr('name') + '=' + value; // Create data-string as Name=Value format
// Send AJAX request using appropriate data
$.ajax({
type: "POST",
url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>" + '_' + parentTd + '',
data: dataString,
cache: false,
success: function (html) {
$('.text-per', parentTd).html(value).show(); // Update html after successful completion of ajax
}
});
});
$(document).mouseup(function (e) {
e.preventDefault();
$('.edit').hide();
$('.text-per').show();
$('.ctrl').show();
});
});
答
如果slctd
才明确$('.info-group').click
,那么你必须把所有的代码依赖于slctd
点击功能里面。
$('.info-group').click(function(e) {
e.preventDefault();
// this is the ONLY place that slctd is being defined at.
slctd = ($(this).attr('class').split(' ')[1]);
$('.'+ slctd +' .text-per').hide();
$('.'+ slctd +' .ctrl').hide();
var data = $('.'+ slctd +' .text-per').html();
$('.'+ slctd +' .edit').show();
$('.'+ slctd +' .editbox').val(data);
$('.'+ slctd +' .editbox').focus();//comming up to here
// PUT ALL OTHER CODE THAT USES slctd HERE
});
由于其他用户询问过。请注意这种技术,因为每次单击.info-group时,它只会将事件绑定到slctd元素。
你可能想看看不同的技术或者是取消绑定先前的事件:
var current_slctd;
$('.info-group').click(function(e) {
e.preventDefault();
// code below will be about binding to new slctd
// this is the ONLY place that slctd is being defined at.
var slctd = ($(this).attr('class').split(' ')[1]);
if (current_slctd == slctd) {
// return since this value of slctd has already been done
return;
} else {
// UNBIND events on current_slctd
}
// start over and bind new events
current_slctd = slctd;
$('.'+ slctd +' .text-per').hide();
$('.'+ slctd +' .ctrl').hide();
var data = $('.'+ slctd +' .text-per').html();
$('.'+ slctd +' .edit').show();
$('.'+ slctd +' .editbox').val(data);
$('.'+ slctd +' .editbox').focus();//comming up to here
// PUT ALL OTHER CODE THAT USES slctd HERE
});
还是同样的问题,'slctd'是'undefined'当你绑定事件 – Tushar
@Tushar耶其表示不确定,请给我这个 –
问题的任何可能的解决方案是您所定义的事件句柄基于尚未设置的变量。这就是为什么你得到undefined – Aaron