jquery追加内容而不是trigering选择器

时间:2016-02-10 13:49:14

标签: jquery jquery-selectors appendto

我想通过单击图像使用追加向表中添加新行。我使用ajax和php来检索新行。添加行后,选择器onchange不会触发。仅限第一行。

我查看了Firebug,<select>

上没有任何活动

如何在on change事件中触发第二行?

代码HTML:

<table id="tablines">
    <tr>
        <td>
            <select class="prod" data-id="1" name="product">
                <option value="a">A</option>
                <option value="b">B</option>
            </select>
        </td>
    </tr>
</table>
<img id="add" src="img/add1.png" style="cursor:pointer">

Code JQuery:

$('.prod').on( "change", function(){
    var dataid = $(this).data('id');
    alert (dataid);
});

$("img").click(function() {
    $.ajax  ({
        type: "GET",
        url: "getrow.php",
        success: function(data) {
            $('#tablines tbody').append(data);
            },
        });
});

PHP返回码是:

<tr>
    <td>
        <select class="prod" data-id="2" name="product">
            <option value="a">A</option>
            <option value="b">B</option>
        </select>
    </td>
</tr>

3 个答案:

答案 0 :(得分:1)

请尝试此

$nestedFilter  = new Nested();
$boolFilter    = new Bool();
$boolAndFilter = new BoolAnd();
$boolAndFilter
    ->setFilters(array(
        new Term(array("children.user.id" => $this->getClient()->getId())),
        new Term(array("children.other" => $language))
    ))
;

$nestedFilter
    ->setFilter($boolAndFilter)
    ->setPath('children')
;

$query = new Filtered(
    $query,
    new BoolNot($boolFilter->addMust($nestedFilter))
);

由于您要动态添加元素,因此应使用delegate()。它根据一组特定的根元素,为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序

答案 1 :(得分:1)

delegate最好由后来的jQuery版本中的委托on调用替换。这是首选版本:

$(document).on("change", ".prod", function() {
  var dataid = $(this).data('id');
  alert (dataid);
});

通过监听事件来冒泡到不变的祖先元素。如果没有其他更接近/方便的话,document是最好的默认值。不要使用body因为它有错误。

然后它将jQuery选择器仅应用于bubble链中的元素。然后它为导致事件的每个匹配元素执行函数。

这样做的结果是它适用于在事件被注册后很久就添加的项目

答案 2 :(得分:0)

1。 请在&#34; $(&#39; #tablines tbody&#39;)中删除tbody后尝试。附加(数据);&#34;

或 2。

可能是在jquery函数中提供动态控件id的简单方法,这样特定的raw就可以绑定它...同一个事件(在更改时)。

by $(&#34;#&#34; + data-id).on(&#34; change&#34;,func ....

为此您必须为表中的每个原始追加添加动态ID。 你可以在google上搜索。