JavaScript函数没被调用?

时间:2018-04-05 08:01:57

标签: javascript

所以我有一个调用

的按钮
<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();
        }
    }

当我在文本字段中获得焦点时,不会显示验证。

1 个答案:

答案 0 :(得分: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]);
)};