我正在尝试使用venobox lightbox允许用户在页面上选择用户生成的项目并编辑其内容。 u-g项目有一个用jQueryUI制作的按钮：
<span class='ui-icon ui-icon-pencil'></span>
我想单击它，并在venobox灯箱中显示一个编辑表单。 Venobox提供了一个iframe选项，应该做得很好。要呼叫venobox，我需要执行类似的操作
<a class='venobox_custom' data-type='iframe' href='http://www.sample.com/editform.html'>open iFrame</a>
所以我不能只使用"window.location = url"如何使用URL指定类和数据类型？
没有太大希望，我尝试在跨度中插入完整的锚文本，但是没有任何显示可点击，并且单击按钮不会调用venobox。
我已经使.on("click")逻辑起作用，只是不调用venobox。
7月27日编辑
我已将代码以简化形式放到此处并可以运行：http://www.informationtamers.com/venoboxtest/index.html
我已经尝试了iframe和内联选项，并且此代码演示了这两个选项，但是它们不会调用Venobox。还有一个硬链接可以显示Venobox正常工作，但不能以我需要的方式使用它。
这里是代码：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="todo.css"/>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- venobox is a jquery lightbox plugin -->
<link rel="stylesheet" href="venobox/venobox.css" type="text/css" media="screen" />
<title>UG list</title>
</head>
<body>
<p>I've removed as much of the functionality as I can, like getting users' previously-added content from a JSON file, saving it after changes, sanitizing user content, and so on.</p>
<p>First, add a line by pressing Add.<br/>
While experimenting with venobox, I've made that generate two lines:
The first uses venobox's 'inline' option, the second, its 'iframe' option.</p>
<div id="inputs" class="textIn">
<form name="checkListForm" >
<input type="text" id="textEntry" name="userEntry" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<div id="buttonItem">Add</div>
</div>
<ul class="list">
</ul>
<p>Once you've added a line, click the blue pencil button that appears on the right of the first line. This doesn't appear to invoke venobox, although console.log entries show that it's passing through the on-click code.</p>
<p>Then click the blue pencil button that appears on the right of the second line. This loads editform.html into the browser window directly instead of showing it in a lightbox. It appears to be treating it as a normal hyperlink.</p>
<p>The behavior I'm trying to get can be seen if you click this link (uses the 'inline' option):<br/>
<center><a class='venobox_custom' data-type='inline' href='#lightboxform'><b>open inline form in lightbox</b></a></center><br/>
<div id="lightboxform" style="display:none">
<div class="textIn">
<form name="editForm" >
<input type="text" id="textEdit" name="userEdit" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<div id="buttonItem">Save changes</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<!-- Add venobox (a jquery lightbox plugin) -->
<script type="text/javascript" src="venobox/venobox.min.js"></script>
<script>
// ƒ to MOVE new user input to a <li> item
function sendLineToDOM (lineType) {
var toAdd = $('input[name=userEntry]').val();
if (toAdd == null || toAdd == "") {
console.log('empty');
}
else {
// two lines generated here while experimenting with venobox
// this uses venobox's 'inline' option
$('.list').prepend("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "iframe: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='iframe' href='editform.html'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>");
// this uses venobox's 'iframe' option
$('.list').prepend("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "inline: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='inline' href='#lightboxform'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>");
// empty text input field once data consumed
$('#textEntry').val("");
}
}
// Substantive START
$(document).ready(function () {
$('#textEntry').val("Some text or other here.");
console.log('Initialize lightbox plugin');
/* default settings */
$('.venobox').venobox();
/* open content with custom settings */
$('.venobox_custom').venobox({
framewidth: '300px',
frameheight: '250px',
border: '6px',
bordercolor: '#ba7c36',
numeratio: true,
infinigall: true
});
/* auto-open #firstlink on page load */
$("#firstlink").venobox().trigger('click');
// Enable DRAG of list items vertically to re-order them
$(".list").sortable( {
handle: ".handle"
});
// DELETE a line when its red-button trash symbol is clicked on
$(document).on("click", ".delete", function ()
{
var whichOne = Math.floor( $("span").index(this) / 7 );
$( "ul li" ).eq( whichOne ).remove();
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function ()
{
console.log('Click on edit button detected for line #:');
var whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
var extractedText = $( "ul li" ).eq(whichOne).text();
// The following was an initial form for user text editing, but for the planned functionality, I want to show the lightbox instead.
$('#textEdit').val( extractedText );
console.log(extractedText);
});
/* Add a line with text box contents as ACTION text when Action button pressed*/
$('#buttonItem').click(function () {
console.log('Add Action text on button press');
sendLineToDOM ('item');
});
});
</script>
</body>
</html>
当您将新元素动态添加到DOM树时，这些新元素不会自动受到已经初始化的代码的影响。对于您而言，添加新链接后，您必须在其上初始化venobox。试试这个：
function sendLineToDOM (lineType) {
var toAdd = $('input[name=userEntry]').val();
if (toAdd == null || toAdd == "") {
console.log('empty');
}
else {
// two lines generated here while experimenting with venobox
// this uses venobox's 'iframe' option
var iframeRow = $("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "iframe: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='iframe' href='editform.html'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>"),
iframeLink = iframeRow.find('a');
$('.list').prepend(iframeRow);
// this uses venobox's 'inline' option
var inlineRow = $("<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + "inline: " + toAdd + "<span class='edit'><a class='venobox_custom' data-type='inline' href='#lightboxform'><span class='ui-icon ui-icon-pencil'></span></a></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>"),
inlineLink = inlineRow.find('a');
$('.list').prepend(inlineRow);
// empty text input field once data consumed
$('#textEntry').val("");
iframeLink.venobox();
inlineLink.venobox();
}
}
}
@@ Niklas给了我一个有效的答案（并改进了我的代码），但是在那个阶段，我还没有弄清楚如何将要编辑的数据传递到灯箱表单。经过大量的尝试和搜索，我发现这是不可能的，还是我无法完全理解，所以我将通过一个最终的完整解决方案来重新审视此情况，以防其他任何人正在寻找一种方法来允许用户编辑他们已经拥有的文本在灯箱中输入以前的内容，然后将其保存回页面。 （请注意，这不包括对用户内容进行清理，这显然是必要的。）
问题是，单击蓝色的编辑按钮会立即启动Venobox灯箱-没有机会将现有数据加载到输入字段。我在Venobox文档中找不到有关如何完成操作的信息。在我的项目中，将有许多行用户输入的数据，每行都有一个关联的编辑按钮，但是一旦触发了编辑灯箱，就太迟了，无法获取数据。
解决方案是另一个灯箱jquery插件：Colorbox。 http://www.jacklmoore.com/colorbox/
这是有据可查的。除了使用超链接之外，它还具有直接调用Colorbox的方式，因此我可以通过“单击”触发编辑，设置所选的输入表单数据，然后跳入colorbox，并执行所有其他需要的操作。 >
下面是代码，但是再次，我在这里在线放置了一个可运行的示例：http://www.informationtamers.com/colorboxtest/index.html
我已删除问题中提到的venobox在线代码。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="todo.css"/>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- colorbox is a jquery lightbox plugin -->
<link rel="stylesheet" href="colorbox/colorbox.css" type="text/css" media="screen" />
<title>UG list</title>
</head>
<body>
<p>I've removed much of the functionality, like getting users' previously-added content from a JSON file, saving it after changes, sanitizing user content, and so on.</p>
<p>First, press Add to generate a line, then key in one or two more lines.</p>
<div id="inputs" class="textIn">
<form name="checkListForm" >
<input type="text" id="textEntry" name="userEntry" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<div id="buttonItem">Add</div>
</div>
<ul class="list">
</ul>
<p>Next, press one of the blue pencil buttons, change the text presented in the lightbox input form, and press Save changes.</p>
<p> </p>
<div style="display:none">
<div id="lightboxform">
<div class="textIn" >
<form name="editForm" >
<input type="text" id="textEdit" name="userEdit" style="width: 99%; height:25px"/>
</form>
</div>
<div id="controls" style="width: 100%">
<center><div id="buttonSaveChange">Save changes</div></center>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script> <!-- colorbox is a jquery lightbox plugin -->
<script>
// ƒ to add new user input to a <li> item
function sendLineToDOM (lineType, lineText) {
var toAdd = lineText;
if (lineText == null || lineText == "") {
console.log('empty');
}
else {
var inlineRow = "<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + lineText + "<span class='edit'><span class='ui-icon ui-icon-pencil'></span></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>";
$('.list').prepend(inlineRow);
// empty text input field once data consumed
$('#textEntry').val("");
}
}
// ƒ to move edited input to appropriate <li> item
function returnLineToDOM (lineType, lineText) {
if (lineText == null || lineText == "") {
console.log('empty');
}
else {
var inlineRow = "<li><span class='" + lineType + "'><span class='handle'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span></span>" + lineText + "<span class='edit'><span class='ui-icon ui-icon-pencil'></span></span><span class='delete'><span class='ui-icon ui-icon-trash'></span></span></span></li>";
// replace original line
$( "ul li" ).eq( whichOne ).replaceWith( inlineRow );
// empty text input field once data consumed
console.log('data consumed, empty text input field');
$('#textEdit').val("");
}
}
// Substantive START
$(document).ready(function () {
$('#textEntry').val("Some text or other here.");
/* Define global variables */
window.whichOne = 0; // global variable indicating which line selected for edit
window.extractedText = ""; // global variable to hold user text selected for edit
// Enable DRAG of list items vertically to re-order them
$(".list").sortable( {
handle: ".handle"
});
// DELETE a line when its red-button trash symbol is clicked on
$(document).on("click", ".delete", function ()
{
var whichOne = Math.floor( $("span").index(this) / 7 );
$( "ul li" ).eq( whichOne ).remove();
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function ()
{
console.log('Click on edit button detected for line #:');
var whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
var extractedText = $( "ul li" ).eq(whichOne).text();
$('#textEdit').val( extractedText );
console.log(extractedText);
});
// Add line w.text box contents as action text when Action button pressed
$('#buttonItem').click(function () {
console.log('Add Action text on button press');
sendLineToDOM ('item', $('input[name=userEntry]').val());
});
// EDIT a line when its blue-button pencil symbol is clicked on
$(document).on("click", ".edit", function () {
console.log('Edit a line');
// The divisor in the next expression is the number of <span>s before the
// clicked one in the <li> lines constructed in sendLineToDOM(). This
// works out which blue button has been pressed, and therefore which
// <li> item to edit.
whichOne = Math.floor( $("span").index(this) / 7 );
console.log(whichOne);
var input = $( 'input[name=userEntry]' );
extractedText = $( "ul li" ).eq(whichOne).text();
console.log('extracted:' + extractedText );
$('#textEdit').val( extractedText );
$.colorbox({inline:true, href:"#lightboxform", width:"80%", height:"25%"});
});
/* RELOAD edited line on click */
// Get the edited user input and replace the old entry with it.
$('#buttonSaveChange').click(function () {
console.log('Replace old entry on button press');
// Save edited text!!!!
returnLineToDOM ('item', $('input[name=userEdit]').val());
$.colorbox.close()
});
});
</script>
</body>
</html>
我相信我的目的是在iframe打开后获得对流程的控制。