jQuery:触发动态内容事件

时间:2017-05-05 21:53:49

标签: javascript jquery

我正在尝试使用

上的动态表格

https://codepen.io/ashblue/pen/mCtuA

我想要一个删除表中所有行的按钮。基本上,在类click

的所有实例上触发.table-remove函数

我试着做以下

function deleteAll() {

        jQuery('.table-remove').each(function() {
            var currentElement = $(this);
            console.log(currentElement);
            currentElement.trigger('click');
        });
    }

其中点击定义为

$('.table-remove').click(function() {
            console.log("triggered");
            $(this).parents('tr').detach();
        });

但是当我调用deleteAll函数时没有任何反应。我甚至不在控制台上做任何事情

我正在做这件事吗?

2 个答案:

答案 0 :(得分:1)

如果目标只是删除行,您可以直接执行此操作而不会触发每个单独的点击事件:

function deleteAll() {
  $('.table-remove').closest('tr').remove()
}

如果你真的需要在每个&.39上触发点击事件。删除'你应该这样做:

function deleteAll() {
  $('.table-remove').each(function() {
    $(this).trigger('click')
  });
}

(...这大致相当于您现有的代码。我不确定为什么您现有的代码不适合您;也许这取决于您使用{{1而不是jQuery()别名,或者您只是没有成功调用$()函数?)

答案 1 :(得分:1)

  

我想要一个删除表中所有行的按钮。所以基本上,在类using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using Emgu.CV; using Emgu.CV.Structure; using Emgu.Util; using Emgu.CV.CvEnum; namespace FaceDetectTest { public partial class Form1 : Form { public Capture cap; public CascadeClassifier haar; public int NumberOfFaces; public Rectangle[] Faces; public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { cap = new Emgu.CV.Capture(0); haar = new CascadeClassifier(@"C:\Users\Rob\AppData\Roaming\masterbeast\haarcascade_frontalface_alt_tree.xml"); NumberOfFaces = 0; } private void timer1_Tick_1(object sender, EventArgs e) { using (Image<Bgr, byte> nextFrame = cap.QueryFrame().ToImage<Bgr, Byte>()) { if (nextFrame != null) { Image<Gray, byte> grayframe = nextFrame.Convert<Gray, byte>(); Faces = haar.DetectMultiScale(grayframe, 1.1, 1, new Size(100, 100), new Size(1000, 1000)); NumberOfFaces = Faces.Length; } pictureBox1.Image = nextFrame.ToBitmap(); textBox2.Text = NumberOfFaces.ToString(); } } } } 的所有实例上触发click函数。

你可以这样做,但将桌子组织成简单的方法要简单得多:

  • 包含标题行的.table-remove
  • 包含可见行的<thead>
  • 包含行模板的<tbody>

因此,&#34;删除全部&#34;背后的代码按钮可以非常简单地选择第一个<tbody><tbody>中的所有行。

HTML

.remove()

另一个方面是如何最好地将点击处理程序附加到三行操作 - 删除,上移和下移。

当动态创建/附加行时,要使用jQuery&#39; <div class="container"> <h1>HTML5 Editable Table</h1> <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p> <ul> <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> <li>Simple / powerful features such as add row, remove row, move row up/down.</li> </ul> <div id="table" class="table-editable"> <span class="table-add glyphicon glyphicon-plus"></span> <table class="table"> <thead> <!-- <<<< wrap the header row in <thead>...</thead> --> <tr> <th>Name</th> <th>Value</th> <th></th> <th></th> </tr> </thead> <tbody class="main"> <!-- <<<< wrap the visible row(s) in <tbody>...</tbody> --> <tr> <td contenteditable="true">Stir Fry</td> <td contenteditable="true">stir-fry</td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> </tbody> <tbody class="hide"> <!-- <<<< wrap the template row in its own hidden <tbody>...</tbody> --> <tr> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> </tbody> </table> </div> <button id="export-btn" class="btn btn-primary">Export Data</button> <button id="deleteAll-btn" class="btn btn-primary">Delete All</button> <p id="export"></p> </div> 将点击处理委托给容器(例如表)。这会将所需的操作附加到所有当前行,和将来的行,只需附加它们即可。

的Javascript

$(static-container).on(event, descendent-selector, handler)

DEMO