jquery json遍历和动态绑定事件

<div id=‘tmpselectorList‘ style=‘border: 1px solid grey;max-height: 150px;position:absolute;text-align: left; overflow: auto;background:white;width:153px;‘>

                </div>
<script type="text/javascript">
$(document).ready(function () {
    $("#engineerName").change(function () {
        //ajax获取数据库查询得到的数据
        var name = $("#engineerName").val();
        if(name != ""){
            $.ajax({
                type: "get",
                dataType: "json",
                url:"${contextPath}/carUpload/enginNameByLike/" + name +"?random="+Math.random(),
                success: function (result) {
                    //清空原来的旧数据
                    $("#tmpselectorList").empty();

                    var html = "<ul class=‘ui-menu‘ style=‘cursor: pointer;‘>";

                    //json数据遍历
                    $.each( result.data, function(index,item){
                        //alert("index:"+index+", item:"+ item);
                        html += "<li>"+item+"</li>";
                    });

                    html += "</ul>";
                    $("#tmpselectorList").append(html);

                 }
            });
        }
    });  

    //jquery动态绑定事件
    $("#tmpselectorList").on("click","ul li",function(){
        //赋予值
        $("#engineerName").val( $(this).text() );
    }) ;
});
</script>

jquery json遍历和动态绑定事件

时间: 2024-10-09 02:04:57

jquery json遍历和动态绑定事件的相关文章

javascript与jquery动态绑定事件需要先加载页面注意的坑

1.javascript的Dom对象动态事件绑定注意以下2点,如:document.getElementById("id名称").addListenerEvent("事件名称",function(){代码},false),动态绑定事件,事件名称不加on,如:click,mouseover等. (1)如果<script>绑定代码</script>写在<body>html代码</body>前面,则必须先使用加载页面语句wi

JQuery $.each遍历JSON字符串报Uncaught TypeError:Cannot use &#39;in&#39; operator to search for

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. [js] view plaincopy var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName&

jquery $.each遍历json数组方法

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="content-

设置获得的标签体、动态绑定事件以及Ajax

前言 主要谈谈Ajax以及jQuery对Ajax的支持 Ajax(Asynchronous javascript  and xml)以异步地方式实现局部HTML的刷新.创建交互式web应用程序而无需牺牲浏览器兼容性的流行方法. 正文 设置获得的标签体 动态绑定事件 方式一 方式二 例子 Ajax 1.Ajax是一种在2005年由Google推广开来的编程模式,是一种使用现有标准的新方法通过Ajax,可以创建更好.更快以及更友好的web应用程序. 2.Ajax基于javascript和HTTP请求

JQuery + JSON作为前后台数据交换格式实践

JQuery + JSON作为前后台数据交换 JQuery提供良好的异步加载接口AJAX,可以局部更新页面数据, http://api.jquery.com/category/ajax/ JSON作为一种轻量数据格式,被浏览器js引擎普遍支持,同xml格式. 使用AJAX+JSON数据格式来实现动态页面,有以下好处: 1. 松耦合, 页面HTML和数据彻底分离, 即表示层 和 数据层分开, 有利前台样式定制. 不同于以往后台脚本嵌套HTML标签,并输出数据到标签的合适位置, 来实现动态页面,表示

JQuery+Json

结合使用jQuery和Json的话感觉不错,操作上来说很方便,先简单说说Json的一些优点,当然Json不仅仅这些优点. 1.方便前台数据的操作. 2.数据体积小,传输快. 3.客户端操纵XML的时候需要创建ActiveX对象,Json则完全就是一个JS对象,它不需要创建DOM. 下面是一个简单的例子,大家可以参考一下,主要功能有:1.获取js值.2.获取单个值.3.获取对象值.4.获取List对象.5.获取Map对象. 具体代码如下: 先看看控制器Action的代码.JsonJqueryStr

Struts2+JQuery+JSON实现异步交互

Struts2+JQuery+JSON实现异步交互,包括从后台获得单个值.对象.List和Map数据并从前台的表达中获取值把值进行序列化通过JQuery的$.ajax({})传到后台和后台的对象进行绑定. 第一步:在MyEclipse中创建JavaWeb工厂并把Struts2 和 json的jar包添加到工程中添加完成后的工程图是: 第二步:创建后台: 1. UserInfo实体类: Userinfo实体类代码: package struts2jsonjquery.test.entity; im

jQuery三——筛选方法、事件

目录 一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>筛选方法</title> <style type="text/css"> li.active { font-size: 50px; } &

jquery为新增元素添加事件

jquery为新增元素添加事件 默认情况,你使用jquery新增一个元素 ,用class的方法无法绑定事件,需要将绑定的函数放到jquery外面 然后在绑定行内事件 这样就可以绑定了