[英]jQuery Click - Doesn't work when page 1st loaded, but works if page is reloaded
I have an issue with the jQuery click function. 我的jQuery click函数有问题。 I am trying to integrate jQuery Mobile Autocomplete into an C# MVC application.
我正在尝试将jQuery Mobile自动完成功能集成到C#MVC应用程序中。
It the following code doesn't work when the page first loads. 第一次加载页面时,以下代码不起作用。 However, it works if I reload/refresh the page.
但是,如果我重新加载/刷新页面,它会起作用。
HTML: HTML:
<ul data-role="listview" class="selectitems" data-filter="true" data-inset="true" data-filter-reveal="true" data-filter-placeholder="Search Ingredients...">
@foreach (var i in Model.ingredientList){
<li data-id="@i.id" data-unit="@i.useUnit.symbol"><a href="#" class="ui-screen-hidden">@i.title</a></li>
}
</ul>
Script: 脚本:
<script src="/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
$(document).ready(function () {
$('.selectitems > li').on('click', function () {
$('input[data-type="search"]').val($(this).text());
$("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
$('#hdnIngredientID').val($(this).data('id'));
$('#txtUseQtyDetails').val($(this).data('unit'));
$('#hdnIngredientTitle').val($(this).text());
$('#txtQty').focus();
});
$('.ui-input-clear').on('tap', function () {
$('#hdnIngredientID').val('');
$('#txtUseQtyDetails').val('');
});
});
Any assistance would be appreciated. 任何援助将不胜感激。
UPDATE: 更新:
jQuery-mobile autocomplete hides the list items until user input happens using CSS "display: none;". jQuery-mobile自动完成功能会隐藏列表项,直到使用CSS“ display:none;”进行用户输入为止。 Would this prevent the click function from being assigned?
这会阻止分配点击功能吗? If so, how do I work around this?
如果是这样,我该如何解决?
FURTHER UPDATE: 进一步更新:
Found that the "live" function is depreciated. 发现“实时”功能已被贬值。 Changed it to "on" instead.
改为“ on”。 Unfortunately this didn't fix the problem :-(
不幸的是,这不能解决问题:-(
Could it be because the "li" items are hidden by CSS when the page is loaded? 可能是因为加载页面时CSS隐藏了“ li”项吗?
I've deployed it here: 我已经在这里部署了它:
http://rar_mobile_dev.runarestaurant.com/Ingredient/Create?recipe_id=15240 http://rar_mobile_dev.runarestaurant.com/Ingredient/Create?recipe_id=15240
(username: test, password: test) (用户名:test,密码:test)
You could try using on() in stead of click. 您可以尝试使用on()代替click。
$(document).on('click', '.selectitems > li', function(){
$('input[data-type="search"]').val($(this).text());
$("ul:jqmData(role='listview')").children().addClass('ui-screen-hidden');
$('#hdnIngredientID').val($(this).data('id'));
$('#txtUseQtyDetails').val($(this).data('unit'));
$('#hdnIngredientTitle').val($(this).text());
$('#txtQty').focus();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.