jQuery Mobile：渲染新元素但不触发动作

Posted 2023-05-09

【中文标题】jQuery Mobile：渲染新元素但不触发动作

【英文标题】：jQuery Mobile: new elements are rendered but not trigger actions

【发布时间】：2013-06-25 14:37:27

【问题描述】：

我在处理一些动态创建页面的工作元素时遇到问题。

在一个页面上，我创建了每个按钮都有一个“date-wgbn-id”并使用类 .remPromotor 来触发操作。

已经随页面携带的按钮，通常会触发动作，但动态添加的新按钮不会触发这些动作。

每次添加按钮时都会动态调用。 trigger("create")，它使样式应用于按钮，但不应用动作。

我的 html：

<div data-role="content" class="area">
        <div class="pagina">
            <div data-role="header" data-theme="c"><h2><?php echo $_GET['acao']; ?></h2></div>
            <div><a href="acoes.php" data-role="button" data-icon="arrow-l">Voltar para ações</a></div>
            <hr>
            <div data-role="header" data-theme="e" align="center">
                Promotores desta ação:<br>
                <span style="font-style: italic; color: red; font-size: .9em; font-weight: normal !important;">Clique para remover</span>
            </div>
            <!-- lista os promotores -->

            <div id="proDentro">
                <?php foreach($a->query("select escalas.*, promotores.nome from escalas, promotores where escalas.id_acao = ".$_GET['id']." and promotores.id = escalas.id_promotor order by promotores.nome") as $pro) ?>
                <a href="#" data-role="button" data-icon="minus" data-wgbn-id="<?php echo $pro['id']; ?>" id="pro<?php echo $pro['id']; ?>" class="remPromotor"><?php echo $pro['nome']; ?></a>
                <?php  ?>
            </div>
            <p>&nbsp;</p>
            <hr>
            <div data-role="header" data-theme="e" align="center">
                Promotores fora da ação:<br>
                <span style="font-style: italic; color: green; font-size: .9em; font-weight: normal !important;">Clique para remover</span>
            </div>
            <div id="proFora">
                <?php foreach($a->query("select * from promotores where status = 1 order by nome") as $pro) ?>
                <a href="#" data-role="button" data-icon="plus" data-wgbn-id="<?php echo $pro['id']; ?>" data-wgbn-acao="<?php echo $_GET['id']; ?>" id="fora<?php echo $pro['id']; ?>" class="addPromotor"><?php echo $pro['nome']; ?></a>
                <?php  ?>
            </div>
        </div>
    </div>
<!-- /content -->

这是我用于此页面的 javascript：

    $(document).delegate("#gerpromotor", "pageinit", function() 
    // action that removes the button of the page
    $(".remPromotor").click(function(e) 
        var id = $(this).attr('data-wgbn-id');
        $.get("funcoes.php?opc=delEscala&escala="+id, function(data)
            if (data == 1)
                $("#pro"+id).remove();
            
        );
        return false;
    );

    // action that adds a button to your page
    $(".addPromotor").click(function(e) 
        var id = $(this).attr('data-wgbn-id');
        var acao = $(this).attr('data-wgbn-acao');
        $.get("funcoes.php?opc=addEscala&acao="+acao+"&promotor="+id, function(data)
            $("#proDentro").append(data).trigger('create');
        ,'html');
        return false;
    );
);

文件是 funcoes.php brm 简单：

    <?php
    // pega os dados do usuario
    require_once("Modelo2.php");
    $a = new Modelo2();

    $opc = $_GET['opc'];

    // adiciona o cara na acao
    if ($opc == "addEscala")
        $id_acao = $_GET['acao'];
        $id_promotor = $_GET['promotor'];

        $arr;
        $arr['id_acao'] = $id_acao;
        $arr['id_promotor'] = $id_promotor;
        if ($id = $a->insert("escalas",$arr))
            $tmp = $a->query("select escalas.*, promotores.nome from escalas, promotores where escalas.id = $id and promotores.id = escalas.id_promotor");
            $tmp = $tmp[0];
            echo '<a href="#" data-role="button" data-icon="minus" data-wgbn-id="'.$id.'" id="pro'.$id.'" class="remPromotor">'.$tmp['nome'].'</a>';
        
    

    // remove o cara da acao
    if ($opc == "delEscala")
        $id = $_GET['escala'];

        if ($a->delete("escalas","id = $id"))
            echo 1;
         else 
            echo 0;
        
    
?>

基本上 .trigger("create") 可以对新按钮进行样式化，但我无法触发链接到类 .remPromotor 的动作

谁能帮我解决这个问题？

【问题讨论】：

How to create click event for specific link in a jQuery listview.的可能重复

【参考方案1】：

当您使用$(selector).click 时，这只适用于页面中已有的元素。对于动态元素，您应该使用$('body').on('click', 'selector', function()); 之类的东西。然后为您更改案例：

$(".addPromotor").click(function(e) 
    var id = $(this).attr('data-wgbn-id');
    var acao = $(this).attr('data-wgbn-acao');
    $.get("funcoes.php?opc=addEscala&acao="+acao+"&promotor="+id, function(data)
        $("#proDentro").append(data).trigger('create');
    ,'html');
    return false;
);

为

$('body').on('click', ".addPromotor", function(e) 
    var id = $(this).attr('data-wgbn-id');
    var acao = $(this).attr('data-wgbn-acao');
    $.get("funcoes.php?opc=addEscala&acao="+acao+"&promotor="+id, function(data)
        $("#proDentro").append(data).trigger('create');
    ,'html');
    return false;
);

【讨论】：

感谢@Aguardientico，我如何使用JQM 1.3.1 版本，我认为“.on()”不再起作用，我想知道为什么甚至有这种可能性。但是现在有了您的提示，它的效果非常好！