Question

我正在创建一个调查应用，用户可以在其中创建调查，这些调查存储在单独的html文件中（例如：123.html），以便能够编辑此文件，例如添加或删除文本框或复选框...我用cordova读取文件并将内容放在iframe中，我现在正在尝试的是当用户点击此iframe用户时应该能够编辑单击的元素。但有时点击有效，有时则无效。我已经尝试了许多不同的代码，但似乎都没有，当它工作，然后重新加载页面它不再工作我已经尝试了一些示例代码：

$(function(){
$('#ifr2').on('click',function(){
    $('#ifr2').contents().find("h2").click(function(){alert('title');});
var q=$('#ifr2').contents(); console.log(q);
$(q).find('html').on('click',function(e){console.log(e.target.id);});});
});

和

$(function(){ var r= $('#ifr2').contents().find("body");console.log(r);
      $(r).on('click',function(event){
           console.log(event.target.nodeName);
      });
    // alert(event.target.nodeName);});

和

$("#ifr2").contents().find("h2").on('click',function(){alert('h2');});

和

$('#ifr2').load(function(){ 
var iframeBody = $('body', $('#ifr2').contentWindow.document);
$(iframeBody).on('click', 'h2', function(event) {
   console.log(event.target.nodeName);
});});

第一个和最后一个有时只能工作，所以在这里和google阅读了很多页面之后我决定将内容放在div而不是iframe中会更好

<div id="test" style="border:1px solid black; padding:10px 10px 10px 10px; " data-role="none"></div>

将内容放入div工作但现在有一个问题来自html文件的复选框和单选按钮，它们没有对齐，我试图对齐它们但也失败了，看看屏幕：< / p>

Iframe content looks good

div content doesnt look good

我还试图像这样对齐chkboxes和radios的标签：

function testf(){
    $('#test label').css({"float":"right"});

}

在看到div内容有点混乱后，我将div内容复制到另一个页面进行测试，并且正确对齐

对我而言，如果它是div或iframe并不重要，重要的是我可以轻松点击它进行编辑，并且在加载时它可以正确对齐。

文件内容如下：

<!DOCTYPE html>
<html>
<head>
<title>Umfrage</title>
</head>
<body>
<h2 style="text-align:center;">survey title</h2>
description <br>
<form>
<fieldset style="border:1px solid black"><legend><b>1</b></legend><p>question 1</p><textarea name="txtarea1"></textarea></fieldset><br>
<fieldset style="border:1px solid black"><legend><b>2</b></legend><p>radiobuttons </p>
<input id="radio1" name="radio1" type="radio"><label for="radio1">a</label><br>
<input id="radio2" name="radio1" type="radio"><label for="radio2">abcdefg</label><br>
<input id="radio3" name="radio1" type="radio"><label for="radio3">c</label><br></fieldset>
<fieldset style="border:1px solid black"><legend><b>3</b></legend><p>chkboxquestion</p>
<input id="chkbox1" name="chkbox1" type="checkbox"><label for="chkbox1">a</label><br>
<input id="chkbox2" name="chkbox1" type="checkbox"><label for="chkbox2">b</label><br>
<input id="chkbox3" name="chkbox1" type="checkbox"><label for="chkbox3">abcde</label><br></fieldset>
<hr id="hrid">
<input value="Abschicken" type="submit">
</form>
</body>
</html>

修改

使用以下代码更改div css来解决它：

 $('#test :radio, :checkbox, label').css({"float":"left","line-height": "1.6em","height":"1.6em","margin":"0px 2px","padding":"0px"});
   $('#test :radio, :checkbox').css({"clear":"left"});

感谢来自How to align checkboxes and their labels consistently cross-browsers

的TheGr8_Nik

现在不需要iframe，div更好

Answer 1

int8

感谢TheGr8_Nik

将html文件放入iframe或div并点击其中

1 个答案: