JavaScript 函数没有被调用？

Question

所以我有一个调用按钮

<a class="btn btn-primary" id="btnAdd" href="#" onclick="ChangesJs.AddPlayList()"> <i class="fa fa-fw fa-plus fa-lg"></i>Add  </a>

并且 JS 函数会自行创建其他表单。

function AddPlayList() {
var form = "<div class='form-group col-sm-3 clscommercial_" + addPlayList + "' style='display:none;' ><label>Break No.</label> <span class='red_color'>*</span><input class='form-control' id='txtBreakno_" + x + "' maxlength='2' onblur='ChangesJS.IsNumeric(this)' onchange='CommonJs.HideErrorMessage(this)' placeholder='Break No.' type='text'></div>";

这是 IsNumeric 函数的定义

function IsNumeric(selectinput) {
        var _value = selectinput.value;
        var ID = selectinput.id;
        if (_value !== "" && !$.isNumeric(_value)) {
            $("#div_" + ID).show();
            $("#span_" + ID).html("Please Enter numeric value !");
            selectinput.value = "";
            selectinput.focus();
        }
    }

当我在文本字段中失去焦点时，不会显示任何验证。

Answer 1

初始加载后在dom中创建的元素需要添加事件监听器。

function AddPlayList() {
var form = "<div class='form-group col-sm-3 clscommercial_" + addPlayList + "' style='display:none;' ><label>Break No.</label> <span class='red_color'>* </span><input class='form-control' id='txtBreakno_" + x + "' maxlength='2' onblur='ChangesJS.IsNumeric(this)' placeholder='Break No.' type='text'></div>";

// append it to the DOM....

var element = document.getElementsByClassName("clscommercial_" + addPlayList);
    element.addEventListener('change', function() { 
        CommonJs.HideErrorMessage(this);
    }, false);

}

此外，如果您删除元素，请不要忘记删除监听器，否则它可能会多次触发。

jQuery 方法可以很好地处理这个问题，如果您使用的话。

$('body').on('change', '.clscommercial', function() {
    // This will fire even on elements added programmatically as long 
    // as your top selector is (body) was created on page load.
    CommonJs.HideErrorMessage($(this)[0]);
)};