动态创建行列下的组件事件无效问题

test07

window下面拖拉一个panel的组件
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
    xid="panel1">
    <div class="x-panel-top" xid="top1"/>  
    <div class="x-panel-content" xid="content1"/>  
    <div class="x-panel-bottom" xid="bottom1"/>
  </div>

想动态的在top1下面创建一个一行+一列。   在列里面放置LabelEdit组件，LabelEdit里面放一个label和一个input。目前创建后发现input的事件无法触发
代码如下：

Model.prototype.modelParamsReceive = function(event){

                var top=this.getElementByXid("top1");
               
                var rowDiv=$('<div component="$UI/system/components/justep/row/row" class="x-row"/>');
                justep.Bind.addNodes(top, rowDiv);
               
                var colDiv=$('<div class="x-col"/>');
                justep.Bind.addNodes(rowDiv, colDiv);

                var option = {
                                parentNode : colDiv,
                                'class' : "x-label-edit x-label30"
                            };
                           
            var labelEdit = new LabelEdit(option);
               
            var labeldiv = $('<label class="x-label"/>');
            justep.Bind.addNodes(labelEdit.domNode, labeldiv);
            justep.Bind.addNodes(labeldiv, "用户编码");
            
            var inputDiv = $('<div class="x-edit"></div>');
            justep.Bind.addNodes(labelEdit.domNode, inputDiv);
               
            var inputField=$('>.x-edit', labelEdit.domNode);
            
                option = {
                         parentNode : inputField,
                        'class' : "form-control x-edit"
                    };
                    
                var input =new Input(option);
                 
                input.on("onblur", function(){
                        console.log("测试.................");
                        alert("测试.................");
                        debugger
                });
        };

经调试，目录结构和预想的一致。但是事件都是无法触发，换成放置button的点击事件也无法触发。求大神指教

liangyongfei

http://docs.wex5.com/wex5-ui-question-list-2067/

参考：http://doc.wex5.com/comp-base/#2.2
这样添加的点击事件

1. <div data-bind='click:divClick'>

复制代码

应该是onBlur 吧！注意大小写！

或者.on('blur', function() {
建议参考下组件的源码
/UI2/system/components/justep/input/input.js

test07

我测试了的   
如果直接挂在content1下面  是可以正常触发事件的。无论是onblur或onBlur。
option = {
                         parentNode : this.getElementByXid("content1"),
                        'class' : "form-control x-edit"
                    };   
                var input =new Input(option);
                 
                input.on("onblur", function(){
                     alert("测试.................");
                        debugger
                });

但是挂在LabelEdit里面    var inputField=$('>.x-edit', labelEdit.domNode);
            
                option = {
                         parentNode : inputField,
                        'class' : "form-control x-edit"
                    };        事件就不会触发。     不知道什么愿意  ，求大神指教

liangyongfei

test07 发表于 2017-6-9 18:03
我测试了的   
如果直接挂在content1下面  是可以正常触发事件的。无论是onblur或onBlur。
option = {

parentNode  应该是一个dom节点对象
Element对象！

而你获取的inputField 是一个jquery 对象！
需要转成js对象才可以！

test07

liangyongfei 发表于 2017-6-9 18:12
parentNode  应该是一个dom节点对象
Element对象！

var inputField=$('>.x-edit', labelEdit.domNode);
            debugger
                option = {
                         parentNode : inputField[0],
                        'class' : "form-control x-edit"
                    };
                var input =new Input(option);         
                input.on("onblur", function(){
                        console.log("测试.................");
                        debugger
                });

修改后  调试 inputField[0]与this.getElementByXid("content1")类型一样。但是还是不能触发事件，求指教

test07

liangyongfei 发表于 2017-6-9 18:12
parentNode  应该是一个dom节点对象
Element对象！

感谢你的指点    问题确实出现在你说的这个问题上