jquery - 单击 ColdFusion 文件中创建的 li

Question

我有一个来自学校数据库的车牌号列表，我已将其放入 Coldfusion 列表中并以 html 形式显示。看起来像这样...

在通过 Coldfusion 将数据导入列表之前，我对数据库中的数据进行硬编码并获取结果。但是，这是一个相当长的列表，因此对其中的所有值进行硬编码并不是一个好的选择，特别是如果将来要扩展该列表的话。所以，我只是制作了另一个 CF 文件来处理将它们全部放入列表中。该文件如下所示:

setPlates.cfm

<cfquery name="q_sample" datasource="cars_live">
  SELECT LICENSE FROM veh_rec 
</cfquery>

<cfloop query="q_sample" >
        <li><a href='#Student'><cfoutput>#q_sample.license#</cfoutput></a></li>
</cfloop>

这是我将它们放入列表的方式:

<div class="ui-grid-solo">
            <div class="ui-block-a"><br></div>
            <div class="ui-block-a"><ul id="plates" data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Filter Students">
    <script type="text/javascript">
    $.get("setPlates.cfm")
        .done(function(data) {
          $("#plates").html(data);
        });
        </script>
        <div id="plates"></div>
    </ul></div>
</div><!-- /grid solo -->

但是，现在我用于输出所有学生数据的算法不再起作用。我唯一的猜测是，在另一个文件中创建 li 元素的列出方式与在同一文件中创建它们时的方式不同。有没有办法让 li 的文本被点击，即使它们不是在同一个文件中创建的？下面是我使用硬编码值的点击算法和 CF 文件。

<script type="text/javascript">
    $("#plates li").click(function() {
        alert("hi");
        var strLicense=$(this).text();
        strLicense=$.trim(strLicense);

        $.get("joey.cfm", { license: strLicense})
        .done(function(data) {
          $("#myResults").html(data);
        });
    });    

和 joey.cfm:

<cfparam name="License" default="">

<cfquery name="q_sample" datasource="cars_live">
  SELECT * FROM veh_rec WHERE LICENSE=<cfqueryparam cfsqltype="cf_sql_varchar" value="#trim(urldecode(License))#">
</cfquery>

<cfif q_sample.recordcount eq 0> 
No Results found for <cfoutput>"#License#"</cfoutput> 
</cfif>

<cfoutput query="q_sample" >
  <p>License Plate Number: #license# <br><br> Permit ID Number: #decal#<br><br> Student ID Number: #ID#</p>
</cfoutput>

提前谢谢您!

Answer 1

不久前我也曾问过类似的问题。您面临的问题是，您在创建函数时尝试与 DOM 中不存在的对象进行交互。您想使用 jQuery 的 .on()将事件附加到新创建的对象。 额外提示，.on() 替换 .live()在 jQuery 1.7 中。因此，如果您使用 live() 获取了任何免费代码，或者有人告诉您使用 live()，请改用 on()

<script type="text/javascript">
    $("#plates").on("click","li",function() {
        var strLicense=$(this).text();
        strLicense=$.trim(strLicense);
     });
</script>