2

我还在学习 jQuery，但遇到了问题。我有一张有 50 多行的表。每个都标有一个 id。

<tr id="51">

这个 id 是数据库 id，我需要将它传递给 jQuery 并与 AJAX 请求一起提交。

        $($location).click(function () {
            var $currentSelection = $(this);

            // if there is already an input-field in this TD, return...
            if($currentSelection.find('select').length > 0)
                return;

            $currentSelection.html('');

            $('<select id="selectLocation" onChange="locationSubmit()"/>')
                .attr('name', 'location')
                .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
                .appendTo(this);
        });

locationSubmit()

function locationSubmit(){
            var $selectLocation = $('#selectLocation').val();
            var $selectId = $(this).val('tr#id'); //stuck here
            alert($selectId);
            $.ajax({ 
                url: '/ajax/training-update.php',
                data: {
                        action: $selectLocation,
                        courseid: $selectId
                    },
                type: 'POST',
                success: function(output) {
                    alert(output);
                    }
            });
        }

中的警报locationSubmit()正在返回 [object Object]。如何传递tr#idto的值locationSubmit()并通过 AJAX 发送？

编辑 - HTML

<tr id="51">
    <td><a href="/link/goes/here.php?course_id=5&id=51">course name</a></td>
    <td>
        <span class="rowStartDate" id="rowStartDate151">09/10/12</span> - 
        <span class="rowEndDate" id="rowEndDate151">09/14/12</span>
    </td>
    <td class="location">Location 2</td>
    <td class="status">open</td>
</tr>
4

2 回答 2

3

那么，有什么好的答案吗？

测试这个：

$($location).click(function () {
        var $currentSelection = $(this);

        // if there is already an input-field in this TD, return...
        if($currentSelection.find('select').length > 0)
            return;

        $currentSelection.html('');

        $('<select id="selectLocation"/>')
            .attr('name', 'location')
            .append('<option>Location 1</option>', '<option>Location 2</option>', '<option>Location 3</option>')
            .appendTo(this);
    });

并用这个替换你的函数：

$('body').delegate('#selectLocation', 'change', function(){

        var $selectLocation = $(this).val(); //Edited here also
        var $selectId = $(this).closest('tr').attr('id'); //edited here
        alert($selectId);
//The AJAX here        
});

如您所见，您的功能消失了，取而代之的是委托，这似乎工作得很好！.delegate ()是一个非常好的函数，它一直在工作，即使元素是在 DOM 准备好之后创建的。它一直在听

编辑 检查第二个代码部分。

于 2012-09-10T22:53:45.410 回答
0 
 var $selectId = $('#selectLocation').parent("tr").attr("id")

但仅以数字形式拥有 ID 并不是一种好的做法。

和 ！！

您正在创建多个ids. 每个文档只能定义一个。

采用：

$($location).on("click" ...

使用动态对象

改变：

$('<select class="selectLocation"

然后

$(".selectLocation").change(function()
{
   var $selectLocation = $(this).val();
   var $selectId = $(this).parent("tr").attr('id'); 
   alert($selectId);

        $.ajax({ 
            url: '/ajax/training-update.php',
            data: {
                    action: $selectLocation,
                    courseid: $selectId
                },
            type: 'POST',
            success: function(output) {
                alert(output);
                }
        });


}
于 2012-09-10T22:55:11.793 回答