Question

我有一个允许用户提交时间表的表单。这包括一周中每天的多个表行。每行都是通过调用AddRow创建的，AddRow会添加HTML，并在JobNumber字段上添加一个自动完成框，这样用户就可以查找并选择所需的作业。

我现在需要在Description字段中添加第二个自动完成功能，以允许用户选择为该作业创建的任务。因此，我需要在源URL中传递一个参数，指定在上一个框中选择的作业。

然而，当我试图找到Job的值时，它总是返回＆＃34; undefined＆＃34;。

我错过了什么？

这是我所拥有的简化版本：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.7/jquery-ui.min.js"></script>

<script>

function AddRow(day) {

    var count = 1;

    var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL",
          "ColdFusion",
          "Erlang",
          "Fortran",
          "Groovy",
          "Haskell",
          "Java",
          "JavaScript",
          "Lisp",
          "Perl",
          "PHP",
          "Python",
          "Ruby",
          "Scala",
          "Scheme"];

    var row = "<tr>" +
        "<td>&nbsp;</td>" +
        "<td>" +
            "<input type='text' style='width:100px' id='" + day + "[" + count + "].JobNumber' name='" + day + "[" + count + "].JobNumber'>" +
            "<input type='hidden' style='width:100px' id='" + day + "[" + count + "].JobID' name='" + day + "[" + count + "].JobID'>" +
        "</td>" +
        "<td><input type='text' size='50' id='" + day + "[" + count + "].Description' name='" + day + "[" + count + "].Description' class='Description' data-day='" + day + "' /></td>" +
        "<td><input type='text' size='6' id='" + day + "[" + count + "].Start' name='" + day + "[" + count + "].Start' class='numbersOnly' /></td>" +
        "<td><input type='text' size='6' id='" + day + "[" + count + "].Finish' name='" + day + "[" + count + "].Finish' class='numbersOnly' /></td>" +
        "<td><input type='text' size='6' id='" + day + "[" + count + "].Travel' name='" + day + "[" + count + "].Travel' class='numbersOnly' /></td>" +
        "<td>" +
            "<input type='hidden' id='" + day + "[" + count + "].Hrs' name='" + day + "[" + count + "].Hrs' class='Hrs'  />" +
            "<input type='text' size='6' id='" + day + "[" + count + "].Hours' name='" + day + "[" + count + "].Hours' class='Hours numbersOnly'  />" +
            "<select name='" + day + "[" + count + "].Mins'>" +
                "<option value='0'>0</option>" +
                "<option value='25'>0.25</option>" +
                "<option value='5'>0.5</option>" +
                "<option value='75'>0.75</option>" +
            "</select>" +
        "</td>" +
        "</tr>";
    $("#Table_" + day).append(row);

    $("input[id$='JobNumber']").autocomplete({
        source: availableTags,
        select: function(event, ui) {
            $("input[id$='JobID']", $(this).parent().parent()).val(ui.item.JobID);
        },
        change: function(ev, ui) {
            if (!ui.item)
                $(this).val("");
        }
    });

    $("input[id$='Description']").autocomplete({
        source: function (request, response) {
            // get the selected job number
            var jobID = $("input[id$='JobNumber']", $(this).parent().parent()).val();

            alert(jobID);

            if (request.term.length > 2) {
                $.ajax({
                    url: "/Tasks/AJAXGetByJobNumber/" + jobID,
                    data: { Task: request.term },
                    dataType: "json",
                    success: function (data) {

                        temp = $.map(data, function (item) {
                            return {
                                label: item.label,
                                value: item.value,
                                JobID: item.JobID
                            }
                        });
                        temp.unshift({ label: "Non-Chargeable Work", value: "Non-Chargeable Work", JobID: null });
                        response(temp);
                    }
                });
            }
        },
    });

}


</script>

<table id="Table_Monday">

</table>

<a href="#" onclick="AddRow('Monday')"/>Add</a>

我在那里添加了一个警报来检查值，但是它返回＆＃34; undefined＆＃34;每次。我已经尝试过JobID和JobNumber字段，两者都不起作用。

Answer 1

简短回答：$(this)不匹配任何内容，请将其替换为$(this.element)

这种情况正在发生，因为source是一个小部件选项，而不是一个事件。因此，它的（伪）处理程序未绑定在节点实例上

即。在source函数内，this引用小部件，而不是元素，这导致选择器不匹配任何内容

要访问该元素，只需使用this.element：

var jobID = $("input[id$='JobNumber']", $(this.element).parent().parent()).val();

以下是您的代码的小提琴：https://jsfiddle.net/uxpeytxn/

注意：这仅与source，select，change和其他事件处理程序this引用该元素相关，正如人们所期望的那样

基于另一个自动完成的选定值的Jquery自动完成URL

1 个答案: