Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile: new elements are rendered but not trigger actions
    text
    copied!<p>I'm having trouble doing some work elements that were dynamically created page.</p> <p>On one page, I create buttons which each have a "date-wgbn-id" and use the class .remPromotor to trigger the action.</p> <p>The buttons that already carry with the page, normally shoot action, but the new buttons added dynamically do not trigger these actions.</p> <p>Each time you add a button dynamically make a call. trigger("create"), it makes the styles are applied to the button, but does not apply the actions.</p> <p>My HTML:</p> <pre><code>&lt;div data-role="content" class="area"&gt; &lt;div class="pagina"&gt; &lt;div data-role="header" data-theme="c"&gt;&lt;h2&gt;&lt;?php echo $_GET['acao']; ?&gt;&lt;/h2&gt;&lt;/div&gt; &lt;div&gt;&lt;a href="acoes.php" data-role="button" data-icon="arrow-l"&gt;Voltar para ações&lt;/a&gt;&lt;/div&gt; &lt;hr&gt; &lt;div data-role="header" data-theme="e" align="center"&gt; Promotores desta ação:&lt;br&gt; &lt;span style="font-style: italic; color: red; font-size: .9em; font-weight: normal !important;"&gt;Clique para remover&lt;/span&gt; &lt;/div&gt; &lt;!-- lista os promotores --&gt; &lt;div id="proDentro"&gt; &lt;?php foreach($a-&gt;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){ ?&gt; &lt;a href="#" data-role="button" data-icon="minus" data-wgbn-id="&lt;?php echo $pro['id']; ?&gt;" id="pro&lt;?php echo $pro['id']; ?&gt;" class="remPromotor"&gt;&lt;?php echo $pro['nome']; ?&gt;&lt;/a&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;hr&gt; &lt;div data-role="header" data-theme="e" align="center"&gt; Promotores fora da ação:&lt;br&gt; &lt;span style="font-style: italic; color: green; font-size: .9em; font-weight: normal !important;"&gt;Clique para remover&lt;/span&gt; &lt;/div&gt; &lt;div id="proFora"&gt; &lt;?php foreach($a-&gt;query("select * from promotores where status = 1 order by nome") as $pro){ ?&gt; &lt;a href="#" data-role="button" data-icon="plus" data-wgbn-id="&lt;?php echo $pro['id']; ?&gt;" data-wgbn-acao="&lt;?php echo $_GET['id']; ?&gt;" id="fora&lt;?php echo $pro['id']; ?&gt;" class="addPromotor"&gt;&lt;?php echo $pro['nome']; ?&gt;&lt;/a&gt; &lt;?php } ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /content --&gt; </code></pre> <p>And this is my javascript for this page:</p> <pre><code> $(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&amp;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&amp;acao="+acao+"&amp;promotor="+id, function(data){ $("#proDentro").append(data).trigger('create'); },'html'); return false; }); }); </code></pre> <p>the file is funcoes.php brm simple:</p> <pre><code> &lt;?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-&gt;insert("escalas",$arr)){ $tmp = $a-&gt;query("select escalas.*, promotores.nome from escalas, promotores where escalas.id = $id and promotores.id = escalas.id_promotor"); $tmp = $tmp[0]; echo '&lt;a href="#" data-role="button" data-icon="minus" data-wgbn-id="'.$id.'" id="pro'.$id.'" class="remPromotor"&gt;'.$tmp['nome'].'&lt;/a&gt;'; } } // remove o cara da acao if ($opc == "delEscala"){ $id = $_GET['escala']; if ($a-&gt;delete("escalas","id = $id")){ echo 1; } else { echo 0; } } ?&gt; </code></pre> <p>Basically .trigger("create") can stylize the new buttons, but I can not trigger the action linked to class .remPromotor</p> <p>Can anyone help me with this?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload