Question

早上好。我慢慢地，但肯定地想出了jQuery，但是今天早上我发现自己很难过，头疼。首先，我的相关代码：

HTML

<fieldset class="fieldset2">
    <legend>Return Specific Curriculum Information</legend>
    <input type="hidden" id="ccnt" value="0">
    <table class="table" id="retc">
        <thead>
            <tr>
                <th class="th">#</th>
                <th class="th">Year</th>
                <th class="th">Lang</th>
                <th class="th">Week/Packet</th>
                <th class="th">Quantity</th>
                <th class="th">Delete</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <input type="button" value="Add Curriculum To Return" class="button" id="addcurric">
    <input type="button" value="Remove All Entries" class="button" id="remcurric">
</fieldset>

的JavaScript / jQuery的

$('#ccnt').data('count', 0);
$('#addcurric').click(function () {
    function getcount() {
        var $this = $('#ccnt'),
            count = $this.data('count') + 1;

        $this.data('count', count);
        return count;
    }

    var mycount = getcount();
    var myyear = 'cyear' + mycount;
    var mylang = 'clang' + mycount;
    var myweek = 'cweek' + mycount;
    var myqty = 'cqty' + mycount;

    alert('mycount: ' + mycount + '; myyear: ' + myyear + '; mylang: ' + mylang + '; myweek: ' + myweek + '; myqty: ' + myqty);

    var tdclass;
    if (mycount % 2 == 1) {
        tdclass = "td1";
    } else {
        tdclass = "td2";
    }

    var chtml = "";
    chtml += "'<tr>";
    chtml += "    <td class=\"" + tdclass + "\">" + mycount + "</td>\n";
    chtml += "    <td class=\"" + tdclass + "\"><select name=\"" + myyear + "\" id=\"" + myyear + "\">\n";
    chtml += "        <option value=\"0\">-- Select --</option>\n";
    chtml += "        <option value=\"1\">Year 1</option>\n";
    chtml += "        <option value=\"2\">Year 2</option>\n";
    chtml += "        <option value=\"3\">Year 3</option>\n";
    chtml += "    </select></td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><select name=\"" + mylang + "\" id=\"" + mylang + "\">\n";
    chtml += "        <option value=\"0\">-- Select --</option>\n";
    chtml += "        <option value=\"1\">English</option>\n";
    chtml += "        <option value=\"2\">Spanish</option>\n";
    chtml += "    </select></td>\\n";
    chtml += "    <td class=\"" + tdclass + "\"><select name=\"" + myweek + "\" id=\"" + myweek + "\">\n";
    chtml += "";
    chtml += "    </select></td>\n";
    chtml += "    <td class=\"" + tdclass + "\"><input type=\"text\"  name=\"" + myqty + "\" class=\"input\"></td>\n";
    chtml += "    <td class=\"" + tdclass + "\"><button type=\"button\" class=\"dbutton\" title=\"Remove This Row\">X</button></td>\n";
    chtml += " </tr>\n'";

    $('#retc > tbody').append(chtml);

    $(".dbutton").bind("click", Delete);
});

$('#remcurric').click(function () {
    $('#retc > tbody').html("");
    $('#ccnt').data('count', 0);
});

function Delete() {
    var par = $(this).parent().parent();
    par.remove();
}

问题/疑问

正如您所看到的，在我的js / jQ代码中，我正在生成动态表行来处理1-n个记录。我还留了一个空白，其中选项行应该是id＆＃34; myweek＆＃34; - 因为它们应该来自我的数据库。通常，我会做这样的事情来填补这些：

$('#'+mylang).change(function() {

    var lang = $('#'+mylang).val();
    var year = $('#'+myyear).val();

    $.post("/chairs-dev/jqf/returncurric_processajax.php", {LANG: lang, YEAR: year}, function (data) {
        $('#'+myweek).append(data);
    });
});

这段代码不起作用，所以我在线搜索代码。我已经尝试了我能想到或在网上找到解决这个问题的所有排列，但没有一个有效。我确信这里有一些基本的东西，但我无法看到它。关于如何让它发挥作用的任何想法？

提前致谢!!

编辑：抱歉，jsfiddle link

Answer 1

与Corey提到的一样，当你调用.change时，它只会绑定当前存在的元素。

为了使其适用于稍后添加到页面的元素，您可以将更改功能绑定到文档并添加选择器。

这样的东西应该适用于稍后添加的元素......

$(document).on('change', '#' + mylang, function(){
    alert('Element changed');
});

Answer 2

这是一种方法。第1步是修复现有的Delete click功能。您将最终以这种方式分配多个单击事件处理程序。第2步是调整change方法。以下是我的工作方式：

// remove your other `.dbutton` click handler
$('#retc').on('click', 'button.dbutton', Delete);

// add a proper change event
$('#retc').on('change', 'select[name^="clang"]', function() {

    var lang = $(this).val();
    var year = $(this).parents('tr').find('[name^="cyear"]').val();

    //alert('lang: ' + lang + ', year = ' + year);

    var $myweek = $(this).parents('tr').find('[name^="cweek"]');

    $.post("/chairs-dev/jqf/returncurric_processajax.php", {LANG: lang, YEAR: year}, function (data) {
        $myweek.html(data);
    });
});

jsFiddle Demo

jquery $（'id'）。更改$（'id2'）。点击？

2 个答案: