[英]Input value not getting picked up in jQuery?
header.php
<div id="rename-content" class="hide">
<form class="popover-form">
<div class="popover-form-content">
<div class="material-input-group stretched">
<input type="text" placehold="Title" id="new-row-name">
</div>
</div>
<div class="popover-footer pull-right">
<button type="button" class="btn btn-default flat close-popover">Cancel</button>
<button type="button" class="btn btn-default flat rename-row">Rename</button>
</div>
</form>
</div>
footer.php在$(document).ready()
$('.edit-row-lbl').popover({
title: "Rename Row",
content: function(){
return $("#rename-content").html();
},
html: true,
placement: 'bottom',
trigger: 'manual'
});
$('.edit-col-lbl, .edit-row-lbl').click(function()
{
if ($(this).hasClass('edit-col-lbl') )
{
to_rename = 'col';
col_id_to_rename = $(this).data('col-id');
$('.edit-col-lbl').popover('show');
}
else
{
to_rename = 'row';
row_id_to_rename = $(this).data('row-id');
$('.edit-row-lbl').popover('show');
}
$('.edit-col-lbl, .edit-row-lbl').not(this).popover('hide');
});
$('body').off().on('click', '.rename-row', function()
{
var new_row_name = $('#new-row-name').val();
console.log('Rename row clicked!');
console.log('New row name: ' + new_row_name);
console.log('Row id to rename: ' + row_id_to_rename);
$.ajax({
type : 'POST',
url : base_url + 'row/renameRow',
data : {
'row_id' : row_id_to_rename,
'row_name' : new_row_name
},
success: function(message)
{
if (message == 'success')
{
console.log('Renaming successful');
window.location = window.location;
}
else
{
console.log('Error >> ' + message);
}
},
error: function(xhr, error)
{
console.log(xhr.responseText);
console.log(error);
}
});
});
在控制台中,显示消息,但行名称为空白。 我没有任何错误,只是输入没有被拾取。 当我尝试打印值长度时,它显示为1。
我只需要这样做:
new_row_name = $('.popover #new-row-name').val();
将其绑定到类。 现在,它获取了价值。 谢谢您的帮助!
这是因为您的$('body')点击函数中包含未知的变量'row_id_to_rename'。
您必须在这些函数之外的顶部声明该变量:
$(document).ready(function() {
var row_id_to_rename; // <- put here!
$('.edit-row-lbl').popover({
...
});
$('.edit-col-lbl, .edit-row-lbl').click(function() {
...
});
$('body').off().on('click', '.rename-row', function() {
...
});
});
输入被拾取只是该值是空字符串。
<input type="text" placehold="Title" id="new-row-name">
如果在您的控制台中找不到它,您将看到“新行名称:未定义
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('.edit-col-lbl, .edit-row-lbl').click(function() { if ($(this).hasClass('edit-col-lbl') ) { to_rename = 'col'; col_id_to_rename = $(this).data('col-id'); $('.edit-col-lbl').popover('show'); } else { to_rename = 'row'; row_id_to_rename = $(this).data('row-id'); $('.edit-row-lbl').popover('show'); } $('.edit-col-lbl, .edit-row-lbl').not(this).popover('hide'); }); $('body').off().on('click', '.rename-row', function() { var new_row_name = $('#new-row-name').val(); console.log('Rename row clicked!'); console.log('New row name: ' + new_row_name); }); }); </script> </head> <body> <div id="rename-content" class="hide"> <form class="popover-form"> <div class="popover-form-content"> <div class="material-input-group stretched"> <input type="text" placehold="Title" id="new-row-name"> </div> </div> <div class="popover-footer pull-right"> <button type="button" class="btn btn-default flat close-popover">Cancel</button> <button type="button" class="btn btn-default flat rename-row">Rename</button> </div> </form> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.