jquery-mobile 面板将值传递给 Ajax答案

【问题标题】：jquery-mobile Panel passing Value to Ajaxjquery-mobile 面板将值传递给 Ajax
【发布时间】：2014-12-18 02:52:15
【问题描述】：

这是我第一次尝试使用 jquery-mobile，我试图传递一个存储在 Ajax 生成的 li 标记的 id 中的值。 li 标签是为 Panel 小部件生成的，如下所示。

var mrn = '123';
$.ajax({
    type: "GET",
    url: "CFCs/assessment_forms.cfc",
    dataType: "json",
    data: {
        method: "NeroForm_rlu"
    },
    success: function (data) {

        var d = data.items;
        var x = '';

        for (var i = 0; i < d.length; i++) {
            x += '<li data-icon="action" id="formSwitcher_' + d[i].ASSESSMENT_DICTIONARYID + '"><a href="forms.cfm?MRN=' + mrn + '"class="ui-btn ui-btn-icon-right ui-icon-action">' + d[i].FORM_NAME + '</a></li>'
        }
        $('#leftNav').append(x).listview("refresh");
    }
});

我正在尝试将第一个 ajax 生成的值传递给这个 ajax 以返回填充页面所需的信息。

$('li[id^="formSwitcher"]').on("click", function (event) {
    var FORMID = $(this);
    $.ajax({
        type: "GET",
        url: "CFCs/assessment_forms.cfc",
        dataType: "json",
        data: {
            method: "FormInstruction_rlu",
            AID: FORMID
        },
        error: function (data) {},
        success: function (data) {
            var d = data.items;
            $('#headerName').html('ACCESSMENT - <b>' + d[0].FORM_NAME + '</b>');
            $('#instructions').html(d[0].INSTRUCTION_TOP);
        }
    });
});

这是导航面板的 HTML

<div data-role="panel" data-display="overlay" id="nav-panel"  data-theme='a'>
   <ul data-role="listview" id="leftNav">
      <li data-icon="delete">
         <a href="" data-rel="close">Close menu</a>
      </li>
      <li data-icon="home">
         <a href="?MRN=123">Home</a>
      </li>
   </ul>
</div>

我相信我的选择器没有绑定，所以我对如何纠正这个问题有点困惑。

【问题讨论】：

标签： jquery ajax jquery-mobile panel coldfusion-10

【解决方案1】：

感谢大家的帮助。

$("#leftNav").on("click",'li' , function (event) {
  var id = $(this).attr('id').split('_')[1];
  console.log(id);
})

【讨论】：

【解决方案2】：

“我相信我的选择器没有绑定，所以我对如何纠正这个问题有点困惑。”

对于动态创建的元素，你必须委托事件。 $(static_parent).on(event, dynamic_child, function)

$("#leftNav").on("click", "li[id^='formSwitcher']", function (event) {
  /* code */
});

【讨论】：

奥马尔，你打败了我（+1），这是你发布的演示：jsfiddle.net/ezanker/eay9dp4d
这有点奏效，但缺少的是点击事件中我需要“点击”、“li”而不是选择器，并且我能够使用拆分功能获取 ID

【解决方案3】：

尝试用这个替换该行；

var FORMID = $(this).attr("id");

【讨论】：

不错，但是选择器正在触发，所以我从来没有达到可以从 LI 标签中读取 ID 的地步。