Question

<script type="text/javascript">
    $.ajax({
        url: "http://192.168.1.60/json_android/getItemData.php",
        jsonpCallback: 'item',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(data) {
            console.log(data);

            var markup = "";
            $.each(data.list, function(i, elem) {
                var $template = $('<li>    <div class=ui-grid-a>   <div class=ui-block-a>  </div>  <div class=ui-block-b>    </div>  </div>   </li>');

                $template.find(".ui-block-a").append('<a href=#  id=' + elem['itemId'] + '>' + elem['itemId'] + '</a>');
                $template.find(".ui-block-b").append("<input type=text/>")
 markup += $template.html();

            });
            $("#tweet-list").append(markup).listview("refresh", true);

        },
        error: function(request, error) {
            alert(error);

        }
    });



$('#tweet-list').on('click', 'a', function(event) {

   console.log($(this).closest("input[type=text]").val());
});

这里我希望在单击链接时获取与链接关联的文本字段的值。我尝试了上面的代码，但它无法正常工作。

Answer 1

如果你的结构看起来像这样

<div class="ui-grid-a">
  <div class="ui-block-a">
    <a href="#" data-role="button">Click</a>
  </div>
  <div class="ui-block-b">
    <input type="text" />
  </div>
</div>

jQuery Mobile将增强内容，因此渲染后结构看起来会有所不同：

<div class="ui-grid-a">
  <div class="ui-block-a">
    <a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">First</span></span></a>
  </div>
  <div class="ui-block-b">
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
      <input type="text" value="First button - first input" class="ui-input-text ui-body-c">
    </div>
  </div>
</div>

使用以下内容检索输入值

$(this).closest('div').next('.ui-block-b').find('input').val();

<强> Demo

单击链接时无法获取文本字段的值

1 个答案: