触发更改事件或修复 querySelectorAll / document.getElementsByClass 名称

Question

好的，所以我在这里阅读了其他几个关于 querySelectorAll 和 getElementsByClassName 以及 none 工作的答案。

这里是 HTML:

<input class="date_input" autocomplete="off" type="text" name="aai_funded_date_c" id="aai_funded_date_c" value="11/26/2015" title="" tabindex="0" size="11" maxlength="10">
<img src="themes/SuiteR/images/jscalendar.gif?v=TYz8pPCJ_YWjY6_eaNf7xg" alt="Enter Date" style="position:relative; top:6px" border="0" id="aai_funded_date_c_trigger">

然后在你点击日历按钮的右边，如果你点击那个 html 弹出的是：

<div class="yui-calcontainer single" id="aai_funded_date_c_trigger_div">
    <table cellspacing="0" class="yui-calendar y2015" id=
    "aai_funded_date_c_trigger_div_t">
        <thead>
            <tr>
                <th class="calhead" colspan="7">
                    <div class="calheader">
                        <a class="calnavleft" href="#">Previous Month
                        (October 2015)</a> <a class="calnav" href=
                        "#">November 2015</a> <a class="calnavright" href=
                        "#">Next Month (December 2015)</a>
                    </div>
                </th>
            </tr>
            <tr class="calweekdayrow">
                <th class="calweekdaycell">Sun</th>
                <th class="calweekdaycell">Mon</th>
                <th class="calweekdaycell">Tue</th>
                <th class="calweekdaycell">Wed</th>
                <th class="calweekdaycell">Thu</th>
                <th class="calweekdaycell">Fri</th>
                <th class="calweekdaycell">Sat</th>
            </tr>
        </thead>
        <tbody class="m11 calbody">
            <tr class="w45">
                <td class=
                "calcell wd0 d1 selectable calcelltop calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell0">
                    <a class="selector" href="#">1</a>
                </td>
                <td class="calcell wd1 d2 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell1">
                    <a class="selector" href="#">2</a>
                </td>
                <td class="calcell wd2 d3 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell2">
                    <a class="selector" href="#">3</a>
                </td>
                <td class="calcell wd3 d4 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell3">
                    <a class="selector" href="#">4</a>
                </td>
                <td class="calcell wd4 d5 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell4">
                    <a class="selector" href="#">5</a>
                </td>
                <td class="calcell wd5 d6 selectable calcelltop" id=
                "aai_funded_date_c_trigger_div_t_cell5">
                    <a class="selector" href="#">6</a>
                </td>
                <td class=
                "calcell wd6 d7 selectable calcelltop calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell6">
                    <a class="selector" href="#">7</a>
                </td>
            </tr>
            <tr class="w46">
                <td class="calcell wd0 d8 selectable calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell7">
                    <a class="selector" href="#">8</a>
                </td>
                <td class="calcell wd1 d9 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell8">
                    <a class="selector" href="#">9</a>
                </td>
                <td class="calcell wd2 d10 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell9">
                    <a class="selector" href="#">10</a>
                </td>
                <td class="calcell wd3 d11 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell10">
                    <a class="selector" href="#">11</a>
                </td>
                <td class="calcell wd4 d12 selected selectable" id=
                "aai_funded_date_c_trigger_div_t_cell11">
                    <a class="selector" href="#">12</a>
                </td>
                <td class="calcell wd5 d13 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell12">
                    <a class="selector" href="#">13</a>
                </td>
                <td class="calcell wd6 d14 selectable calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell13">
                    <a class="selector" href="#">14</a>
                </td>
            </tr>
            <tr class="w47">
                <td class="calcell wd0 d15 selectable calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell14">
                    <a class="selector" href="#">15</a>
                </td>
                <td class="calcell wd1 d16 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell15">
                    <a class="selector" href="#">16</a>
                </td>
                <td class="calcell wd2 d17 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell16">
                    <a class="selector" href="#">17</a>
                </td>
                <td class="calcell wd3 d18 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell17">
                    <a class="selector" href="#">18</a>
                </td>
                <td class="calcell wd4 d19 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell18">
                    <a class="selector" href="#">19</a>
                </td>
                <td class="calcell wd5 d20 today selectable" id=
                "aai_funded_date_c_trigger_div_t_cell19">
                    <a class="selector" href="#">20</a>
                </td>
                <td class="calcell wd6 d21 selectable calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell20">
                    <a class="selector" href="#">21</a>
                </td>
            </tr>
            <tr class="w48">
                <td class="calcell wd0 d22 selectable calcellleft" id=
                "aai_funded_date_c_trigger_div_t_cell21">
                    <a class="selector" href="#">22</a>
                </td>
                <td class="calcell wd1 d23 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell22">
                    <a class="selector" href="#">23</a>
                </td>
                <td class="calcell wd2 d24 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell23">
                    <a class="selector" href="#">24</a>
                </td>
                <td class="calcell wd3 d25 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell24">
                    <a class="selector" href="#">25</a>
                </td>
                <td class="calcell wd4 d26 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell25">
                    <a class="selector" href="#">26</a>
                </td>
                <td class="calcell wd5 d27 selectable" id=
                "aai_funded_date_c_trigger_div_t_cell26">
                    <a class="selector" href="#">27</a>
                </td>
                <td class="calcell wd6 d28 selectable calcellright" id=
                "aai_funded_date_c_trigger_div_t_cell27">
                    <a class="selector" href="#">28</a>
                </td>
            </tr>
            <tr class="w49">
                <td class=
                "calcell wd0 d29 selectable calcellleft calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell28">
                    <a class="selector" href="#">29</a>
                </td>
                <td class="calcell wd1 d30 selectable calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell29">
                    <a class="selector" href="#">30</a>
                </td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell30">1</td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell31">2</td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell32">3</td>
                <td class="calcell oom calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell33">4</td>
                <td class="calcell oom calcellright calcellbottom" id=
                "aai_funded_date_c_trigger_div_t_cell34">5</td>
            </tr>
        </tbody>
    </table>
</div>

那么这是我调用页面的函数：

function dateChange(control_date, calc_date, return_date) {
    var date1 = new Date($('#' + control_date).html());
    var date2 = new Date($('#' + calc_date).val());
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    $('#' + return_date).val(diffDays);
}
var text = "";
var i;
for (i = 0; i <= 34; i++) {
    text += $("#aai_funded_date_c_trigger_div_t_cell" + i).on("click", function () {
        dateChange('date_entered', 'aai_funded_date_c', 'final_day_count_to_funding_c');
    });
}

我调用 .html() 是因为生成的字段只是文本，没有日期值。我已经知道该函数可以正常工作，并且我可以向实际字段调用 .on("click") 事件。但无法在日历中选择字段。

我真正想要完成的是当该字段的值更改时，该功能将激活。我运行遇到的问题是 .val() doesn't trigger .change() in jquery。所以我试着这样做。我也尝试过选择 class 名称而不是使用 querySelectorAll 和 getElementsByClassName，但它总是说它们在控制台中不起作用。

Answer 1

如果您想使用 .val() 更改触发器，只需手动执行即可。

附上你的onchange。

$('#someId').on('change',
    function () {
        // do something
    }
);

然后在您使用 .val() 更新您的值后立即手动触发它：

$('#someId').val('someValue')
$('#someId').trigger('change');

至于 querySelectorAll 和 getElementsByClassName 不工作似乎无论你试图调用它们都不是文档或不是正确的元素节点但是因为你的代码没有显示我只能猜测。

Answer 2

也许不是最好的解决方案，但这是我的最终解决方案：

$('#content').on("mouseover", function(){
                        var date1 = new Date($('#date_entered').html());
                        var date2 = new Date($('#aai_funded_date_c').val());
                        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

                        $('#final_day_count_to_funding_c').val(diffDays);
                        });

我决定忘记日历，当他们在选择日期后将鼠标移动到页面主体时，该功能就会触发。

触发更改事件或修复 querySelectorAll / document.getElementsByClass 名称

Triggering an on change event or fixing querySelectorAll / document.getElementsByClass Name

javascript

jquery

html

for-loop

selectors-api