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

Question

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

在一个页面上，我创建了每个按钮都有一个“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 的动作

谁能帮我解决这个问题？

Answer 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;
});