JQuery 获取 textarea 的值失败

Question

我知道这是一个常见问题，我尝试了所有找到的解决方案。

无论如何，似乎没有任何效果。

我也尝试用 val()、text() 和 html() 获取值，正如有人建议的那样：没什么！

这是我的 HTML（我们在 Wordpress 中）：

<div class="row">
    <div class="three columns">
        <?php _e( 'Content:', 'helpy'); ?>
    </div>
    <div class="nine columns">
        <textarea id="new_task_content" class="helpy-textarea" placeholder="<?php _e( 'Place the content here...', 'helpy'); ?>"></textarea>
    </div>
</div>
<div class="row">
    <div class="three columns">
        <?php _e( 'Due date:', 'helpy'); ?>
    </div>
    <div class="nine columns">
        <input type="date" id="new_task_due" class="helpy-date-input" value="<?php echo date('Y-m-d'); ?>">
    </div>
</div>
<div class="row">
    <div class="twelve columns">
        <button type="button" id="new_task" class="button-helpy"><?php _e( 'Confirm', 'helpy'); ?></button>
    </div>
</div>

和 JS：

$('#new_task').live('click', function() {
    var task_due = $('#new_task_due').val();
    var task_content = $('#new_task_content').val();
    console.log(task_content);
    console.log(task_due);
    /* var data = {
        action: 'project_request',
        task_content: task_content,
        task_due: task_due,
        id: '<?php echo $_GET['id']; ?>',
        todo: 'task',
    };

    $.ajax({
        type: "POST",
        url: ajaxurl,
        data: data,
        dataType: 'JSON',
        success: function(response) {
            $('#response').fadeIn(300, function(){ $(this).html(response.confirm); });
            setTimeout(function() {
                $('#response').fadeOut(300, function(){ $(this).empty();});
            }, 5000);
        },
    });*/
});

整个 JS 都在 jQuery(document).ready(function($){} 中。

一开始我以为是WP Ajax的问题，后来发现变量"task_content"其实根本就没有发布，console里什么也没有出现，除了对于 "task_due" 值。

这是我看不到的错字吗？

我从我的应用程序的另一个页面克隆了 JS 和 HTML，它运行良好。我无法理解问题出在哪里！

编辑：

HTML 包含在对话框 window 中，该对话框类似于 Bootstrap 的对话框。

所以我把按钮改成了这样：

<button type="button" onclick="createNewTask('<?php echo $_GET['id']; ?>');" id="new_task" class="button-helpy"><?php _e( 'Confirm', 'helpy'); ?></button>

和JS函数：

function createNewTask(id) {
var task_due = jQuery('#new_task_due').val();
var task_content = jQuery('#new_task_content').val();
console.log(task_content);
console.log(task_due);
/* var data = {
    action: 'project_request',
    task_content: task_content,
    task_due: task_due,
    id: id,
    todo: 'task',
};

jQuery.ajax({
    type: "POST",
    url: ajaxurl,
    data: data,
    dataType: 'JSON',
    success: function(response) {
        jQuery('#response').fadeIn(300, function(){ jQuery(this).html(response.confirm); });
        setTimeout(function() {
            jQuery('#response').fadeOut(300, function(){ jQuery(this).empty();});
        }, 5000);
    },
});*/

}

结果是一样的:(

Answer 1

我不知道您遇到了什么问题，这是正常工作的 fiddle：https://jsfiddle.net/py5scvhm/

BTW 而不是 .live() 使用 .on() 因为 .live() 已弃用 http://api.jquery.com/live/

Answer 2

而不是

$('#new_task_content').val();

尝试使用

获取价值

$('textarea#new_task_content').val();

也在控制台中调试并检查对象是什么

$('#new_task_content')

Answer 3

好吧，在尝试了几乎所有方法之后，我决定在 bootstrap 模式中插入文本区域。

不知何故，旧对话框的js代码阻塞了读取值。我没弄清楚为什么和哪一部分，但问题肯定在那里。

感谢大家对我的帮助！

JQuery 获取 textarea 的值失败

JQuery failing on getting value of textarea

ajax

wordpress

jquery

textarea

编辑：