触发on change事件或修复querySelectorAll / document.getElementsByClass Name

时间:2015-11-20 15:28:38

标签: javascript jquery html for-loop selectors-api

好的,所以我在这里读了几个关于querySelectorAll和getElementsByClassName的答案,但没有工作。

这是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。所以我尝试这样做。我还尝试使用querySelectorAllgetElementsByClassName来选择类名,但它总是说它们不是控制台中的函数。

2 个答案:

答案 0 :(得分:0)

如果您希望使用.val()进行更改触发,只需手动执行即可。

附上你的onchange。

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

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

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

至于querySelectorAllgetElementsByClassName无法正常工作似乎无论你试图打电话给那些不是文档或不是一个合适的元素节点,但因为你的代码并没有表明我只能猜测。

答案 1 :(得分:0)

也许不是最好的解决方案,但这是我的最终解决方案:

$('#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);
                        });

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