只有点击'活动有效,如何添加' keyup'事件

时间:2015-03-08 16:29:29

标签: javascript jquery html iframe

我有iframe,我有2个div。一个是可编辑的(可输入的)另一个不是。

当在editable元素中输入内容时,我需要将文本发送到服务器。我想听听这个事件,但我无法得到任何东西。

但只有click事件有效!

我也尝试了承诺方法..没有运气。我总是将iframe身体作为目标,而不是让孩子(div)如何克服这个问题?

这是我的功能:

$.when(iframebody.append(div).append(msgDiv)).done(function(output){
        output.find('.mceEditable').on('click', function(e){
            console.log("hi", $(e.target)); //works!
        });
});

$.when(iframebody.append(div).append(msgDiv)).done(function(output){
    output.find('.mceEditable').on('keyup', function(e){
        console.log("hi", $(e.target)); // show the parent (body)
    });
});

HTML:

<body id="tinymce" class="mce-content-body " data-id="tinyeditor1" contenteditable="true" spellcheck="false">
    <p><br data-mce-bogus="1"></p>
    <div class="txtMsg mceNonEditable" data-mce-contenteditable="false" style="margin-bottom: 5px; background: rgb(242, 242, 242);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, n</div>
    <div class="msgText mceEditable" data-mce-contenteditable="true" style="margin-bottom: 5px; outline: 0px;">
    <span class="nameInfo" style="display:none">XYZ - Says : </span>&nbsp; some</div>
</body>

更新

我试图打开和关闭身体可编辑属性,但没有运气

Jsfiddle

1 个答案:

答案 0 :(得分:0)

您的意思是使用mouseup而不是keyup吗?

<强> HTML

<body id="tinymce" class="mce-content-body " data-id="tinyeditor1" contenteditable="true" spellcheck="false">
    <p>
        <br data-mce-bogus="1"></br>
    </p>
    <div class="txtMsg mceNonEditable" data-mce-contenteditable="false" style="margin-bottom: 5px; background: rgb(242, 242, 242);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, n</div>
    <div class="msgText mceEditable" data-mce-contenteditable="true" style="margin-bottom: 5px; outline: 0px;"> <span class="nameInfo" style="display:none">XYZ - Says : </span>
&nbsp; some</div>
</body>

<强> JS

$('.mceEditable').click(function (e) {
    console.log("hi", $(e.target))
});
$('.mceEditable').mouseup(function (e) {
    console.log("hi", $(e.target));
});

jsFiddle