如何模拟一个< >on("click"…)后面带有类和数据类型的标记.在jQuery
How to simulate an <a> tag with class and data-type after .on("click".... in jQuery
我试图使用venobox灯箱允许用户在页面上选择用户生成的项目并编辑其内容。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?
没有太多希望，我试着在span中插入完整的锚文本，但是没有显示任何点击和点击按钮不会调用venobox。
我已经得到了.on("click")逻辑工作，只是不调用venobox。
编辑，7月27日
我把代码在这里的精简形式和可运行:http://www.informationtamers.com/venoboxtest/index.html
我尝试了iframe和inline选项，这段代码演示了它们，但它们不会调用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树动态添加新元素时，这些新元素不会被已经初始化的代码自动影响。在这种情况下，您必须在添加每个新链接后初始化毒液盒。试试这个:
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，这样我就可以使用'on click'触发编辑，设置所选的输入表单数据，并跳转到Colorbox，并执行所有所需的操作。
代码如下，但再次，我在这里放了一个可运行的例子:http://www.informationtamers.com/colorboxtest/index.html
我已经删除了问题中提到的venobox online代码。
<!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打开后获得对流的控制。
我们可以通过在venobox选项中传递回调函数来实现，如下所示。
// Venobox setup
$('.venobox_custom').venobox({
// framewidth : '400px', // default: ''
frameheight : '110vh', // default: ''
border : '10px', // default: '0'
bgcolor : '#96c9db', // default: '#fff'
titleattr : 'data-title', // default: 'title'
titleColer : '#fff',
titleBackground: '#1bbd36',
cb_post_open : function(){
console.log('POST OPEN');
},
});
更简单的解决方案是在重新加载组件中的新元素后初始化VENOBOX插件。你可以测试一下:
//when load the web site
$(document).ready(function(){
$('.venobox').venobox();
});
//When you replace or add new elements in your component
$('.venobox').venobox(); //Note: this goes in the end after create elements
相关文章：
- javascript解释器如何理解变量的数据类型
- 从查询字符串参数推断出正确的数据类型
- 为什么不'我们在javascript中使用函数参数的数据类型
- 基于数据类型的编辑框的汇总列表
- 如何降低此函数的复杂性，该函数根据数据类型进行回调
- 比较和分配数据类型的困难
- 在javascript中调用函数/对象引用时，可容纳任何数据类型
- E4X中是否有一种方法可以将基元数据类型的XMLList转换为类似于Array.join(）的Array
- Highcharts系列.数据数据类型限制
- 如何在php循环中显示隐藏的数据类型
- 如何从标签数据类型＝“;无线电”;
- 如何使用 Java 脚本从 csv 文件中查找每列的数据类型
- 在 Javascript 中更改数据类型
- 抽象数据类型等效于类型
- JavaScript中的“符号”原始数据类型是什么?
- 数据类型Jasmine
- 有没有一种方法可以在Typescript中自动检查数据类型的数据相等性
- 了解JavaScript中的基元数据类型
- 当数据类型为XML时，如何将url参数传递给AJAX jquery
- Javascript函数派生" smallst& quot;数据类型
