JQuery在On Click事件中获取输入框的值

时间:2013-07-25 19:18:12

标签: javascript jquery

这个主题还有很多其他主题,但没有一个能解决我的问题。我正试图从我刚插入的输入字段中获取值。我使用这行javascript插入输入框:

processName.innerHTML = '<input type="text" id="ProcessNameChange" value="' + oldName + '" >';`

然后我尝试使用以下方式访问它:

var newName = $(this).closest("#ProcessNameChange").val(); 

这两个都包含在一个事件中,一个按钮点击事件。如果你喜欢所有这些,下面是整个功能。此外,如果您有更好的方式编写我写的任何内容,请随时分享。

$('.Edit').click(function () {
            if ($(this).attr("id") != "submitUpdate") {
                $(this).attr("id", "submitUpdate");
                $(this).text("Submit");
                var closestTR = $(this).closest("tr");
                var processName = closestTR.children()[2];
                var processDescription = closestTR.children()[3];
                var processID = closestTR.children()[4];
                var oldName = processName.innerHTML;
                var oldDesc = processDescription.innerHTML;
                processName.innerHTML = '<input type="text" id="ProcessNameChange" value="' + oldName + '" >';
                processDescription.innerHTML = '<input type="text" id="ProcessDescChange" value="' + oldDesc + '" > ';
                submitButtonClick();
            } else {
                var newName = $(this).closest("#ProcessNameChange").val(); 
                var newDesc = $(this).closest("#ProcessDescChange").val();
                var processID = $(this).closest("tr").children()[4];

            }

- &GT;与评论相关: 输入框的HTML始终如下所示:它全部通过转发器制作,而不是使用javascript修改。

<tr>
<td class="grid-main-detail"></td>
    <td>
        <input id="ProcessNameChange" type="text" value="PNameOld">
    </td>
    <td>
        <input id="ProcessDescChange" type="text" value="PDescOld">
    </td>
    <td>
    <td>3547556300824952452</td>
    <td>Me </td>
    <td>7/19/2013 2:32:48 PM</td>   
</tr>

谢谢!

3 个答案:

答案 0 :(得分:2)

您使用的是最近的选择器

看到这个小提琴

http://jsfiddle.net/Td6Wx/3/

<div class="test"></div>
<a href="#" class="test2">asdasdas</a>
在您的情况下,

nearest()(http://api.jquery.com/closest)会通过其ANCESTORS .Edit不是输入的子项,所以当然它不起作用。如果您发布html结构,我们可能会提供正确的解决方案

答案 1 :(得分:1)

一个问题:为什么要访问输入的值,如

var newName = $(this).closest("#ProcessNameChange").val(); 

而不是:

var newName = $("#ProcessNameChange").val(); 

由于该项是唯一的(凭借其id属性),我认为不需要使用.closest()来获取它(及其值)。

你真的需要以这种方式选择输入字段吗?

答案 2 :(得分:0)

我建议摆脱innerHTML以专注于jQuery方法,例如.append()$()来创建元素。此外,我想你正在寻找td tr的孩子。

var oldName = processName.text();
var oldDesc = processDescription.text();
processName.append($('<input type="text" id="ProcessNameChange" value="' + oldName + '" >'));
processDescription.append($('<input type="text" id="ProcessDescChange" value="' + oldDesc + '" > '));

希望这有帮助,

R上。