jquery-mobile面板将值传递给Ajax

Question

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

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

这是navPanel的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>

我相信我的选择器没有约束力，因此我对如何更正此问题有些困惑。

Answer 1

“ 我相信我的选择器没有约束力，所以我对如何更正此问题有些困惑。 ”

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

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

Answer 2

尝试用此替换该行；

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

Answer 3

这是有效的方法，感谢大家的帮助。

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