自己遇到的问题javascript类

javascript遇到的问题：

①.不会把数据动态的加载到页面上。

②.不会对动态加载的按钮添加点击事件。

解决方案：

①.不会把数据动态的加载到页面上。

$.ajax({
    url : '<%=request.getContextPath() + "/Message/Search"%>',
    type : 'POST',
    dataType : 'json',
    success : function(data){
    var htmlText = '';
	for(var i=0;i<data.length;i++){
			{
			    htmlText += '<div data-search-create-panel="degreeCreatePanel" style="margin-bottom:15px;" title="每日信息结果" >';
			    htmlText += '<h1 style="font-size:16px;float:left;margin-left:15px;">' + data[i].createdDate + '</h1>';
			    htmlText += '<div style="margin-left:10px;width:300px;float:left;font-size:14px;margin-top:2px;">' + data[i].name + '</div>';
			    htmlText += '<button data-search-centent-edit="linkbutton" style="margin-top:4px;width:80px;" onclick="edit(\''+ data[i].id +'\')">编辑</button>';
			    htmlText += '<span style="margin-left:10px;"><button data-search-centent-delete="linkbutton" style="margin-top:4px;width:80px;" onclick="deleteMessage(\''+ data[i].id +'\')">删除</button></span>';
			    htmlText += '<ul class="degreeCreate-centent" style="padding-top:10px;padding-left:15px;padding-bottom:8px;">';
			    htmlText += '<li style="margin-left:8px;margin-top:6px;">';
			    htmlText += data[i].description;
			    htmlText += '</li>';
			    htmlText += '</ul>';
			    htmlText += '<div style="margin-left:290px;margin-bottom:15px;">';
				htmlText += '编辑人：<span style="margin-right:20px;">' + data[i].projectLoaderName + '</span>';
			    htmlText += '编辑日期：<span>' + data[i].modifiedOn +'</span>';
			    htmlText += '</div>';
			    htmlText += '</div>';
		    }
			$('#dailyInformationCentent').html(htmlText);输出htmlText这个数组到id为dailyInformationCentent的容器内。
			$('div[data-search-create-panel]').panel();
			$('button[data-search-centent-edit]').linkbutton();
			$('button[data-search-centent-delete]').linkbutton();
	    }
    }
});

ajax请求到后台的数据，在成功之后新建一个空的字符串，然后对数据进行遍历，用+=的方式把布局格式及内容写进这个空的字符串内，在需要显示这段数据的地方建立一个DIV，把这个储存了内容的数组输出到div里面。

ajax一共请求到4条数据，被动态的加载到了页面里。

data-search-create-panel

对于这个东西，我自己的理解是类似与ID的东西，可以自行进行定义。因为这里是自己定义的，它被当作id来用了。

②.不会对动态加载的按钮添加点击事件。

$.ajax({
    url : '<%=request.getContextPath() + "/Ticket/SelectListByDebugversionId"%>',
    type : 'POST',
    dataType : 'json',
    data : {
        debugversionId : '<%=request.getParameter("id")%>',
    },
    success : function(data) {
        var htmlTxt = '';
        for (i = 0; i < data.length; i++) {
                    htmlTxt += '<button data-search-centent-designatedMember="linkbutton" style="width:105px;" real-value="' + data[i].Value + '" onclick="test1(this)">' + data[i].Text + '<tton>';
                }
        $('#designatedMember').html(htmlTxt);
        $('button[data-search-centent-designatedMember]').linkbutton();
    }
});
 function test1(obj) {
        $.ajax({
            url : '<%=request.getContextPath() + "/Ticket/Search"%>',
            type : 'POST',
            dataType : 'json',
            data : {
        		userId : $(obj).attr("real-value")
            },
            success : function(data) {
        		$('#CurrentTicket').datagrid('loadData',data);
            },
            error : function(){
        		alert('数据异常！')
            }
        });
 }

给数据动态的添加按钮同样也是先用ajax请求到数据，在成功事件里面用for循环遍历拆分这个数组，让我们可以顺利的拿到想要的字段，然后把按钮动态的写进空数组里面。

这里请求的内容是一个Text,一个Value,页面需要显示text故而加载text，而点击按钮事件需要传递ID给后台（数组的Value属性）所以要在button里面加一条value进去。

real-value="' + data[i].Value + '"

这样就加了一条Value进去，切记：加载变量到value里面，需要多加一个单引号：real-value = " ' + data[i].Value + ' "，不加的话会被认为是一个字符串，如果输出的会把data[i].Value直接输出出来。现在button里面就动态加载了Value值，点击的话再添加一个点击事件进去，这里我动态加载的数据，按钮也是根据数据增加或者减少的，所以不知道点击的是那个，所以要在点击事件中添加一个 this参数进去，this参数就是告诉他们我点击的是那个，这样我就可以顺利的拿到对应按钮的Value了，然后可以进行其他的工作。这里我要进行的是请求ajax。设置一个全局变量来进行ajax的数据传输。全局变量中设置一个参数用来接受点击事件中的this参数，获取点击的按钮的value。在需要传递的数据里面用attr（）方法拿到按钮中的Value值。

$().attr(属性名)jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQueryDOM操作中会经常用到attr()。

两次点击的按钮的ID会根据onclick事件里面的this参数变。

自己遇到的问题javascript类

猜你喜欢