jQuery 结合AJAX实现添加、删除分类等功能【原创】

//业务类型

	//添加二级分类
	$(".serve_contact .serve_add").click(function(){//点击添加时发生事件
		var html = '<div class="set_website">';
		html += '<input type="text" class="set_input"  placeholder="请输入文字" />';
		html += '<div class="engine_btn">';
		html += '<a href="#" class="engine_cancel" title="取消">';
		html += '</a>';
		html += '<a href="#" class="engine_submit" title="保存" ></a>';
		html += '</a>';
		html += '</div>';
		html += '</div>';

		$(this).parents(".serve_contact").append(html);//追加一条新的二级分类
	})

	//删除二级分类
	$(".serve_contact .serve_delete").click(function(){
		$(this).parents(".set_serve").remove();
	})

	//编辑
	$(".business .btn_set").click( function() {
		var business_type_name = $(this).parent().siblings(".set_busname").text();
		$(this).parent().siblings(".set_busname").html("<input type='text' data-busname='"+ business_type_name +"' class='set_input' value='"+ business_type_name + "' />");
                //点击编辑时变为输入框
		$(this).hide();
		$(this).siblings(".btn_cancel").show();
		$(this).siblings(".btn_submit").show();
	});//点击编辑时，出现保存和取消按钮

	//取消
	$("body").on("click", ".business .btn_cancel", function() {
		var busname = $(this).parent().siblings(".set_busname").find("input").data("busname");
		$(this).parent().siblings(".set_busname").html("<span class='set_busname'>"+ busname +"</span>");
		$(this).siblings(".btn_submit").hide();
		$(this).siblings(".btn_set").show();
		$(this).hide();
	})//点击取消时，数据还原。取消变编辑。

	//保存
	$("body").on("click", ".business .btn_submit", function() {
		var that = $(this);
		var business_type_id = that.parent().siblings(".set_busname").data("business-type-id");
		var business_type_name = that.parent().siblings(".set_busname").find("input").val();
                // 保存时需要获取的值
	    $.ajax({
	    	type:'post',
	    	url: 'index.php?c=setting&a=update&business_type_id='+ business_type_id ,
	    	data: {business_type_name: business_type_name },
	    	success: function(data) {
	    		that.parent().siblings(".set_busname").html("<span class='set_busname'>"+ business_type_name +"</span>");
	    		that.hide();
	    		that.siblings(".btn_cancel").hide();
	    		that.siblings(".btn_set").show();
	    	}
	    })//点击保存时执行ajax，追加数据。
	})

	//添加后取消
	$("body").on("click", ".business .engine_cancel", function() {
		$(this).parents(".set_website").remove();
	})//

	//添加后保存
	$("body").on("click", ".business .engine_submit", function() {
		var business_type_name = $(this).parent().siblings(".set_input").val();
		var parent_id = $(this).parents(".serve_contact").find(".serve_type").data("business-type-id");
		var that = $(this);

	    $.ajax({
	    	type:'post',
	    	url: 'index.php?c=setting&a=add&parent_id=' + parent_id ,
	    	data: {business_type_name: business_type_name },
	    	success: function(data) {
	    		that.parent().siblings(".set_input").html("<span class='set_busname'>"+ business_type_name +"</span>");
	    		that.attr("disabled", true);
	    	}
	    })
	})//新添加一条分类后保存时执行ajax，并且追加数据。需要获取父级的parent_id ，通过间接的	business-type-id可以获取到。

	//删除
	$(".serve_contact .btn_delete").click(function() {
		var business_type_id = $(this).parent().siblings(".set_busname").data("business-type-id");
		var business_type_name = $(this).parent().siblings(".set_busname").text();
		var that = $(this);
        var print_str = prompt("请输入大写的DELETE，用来删除沟通方式-" + business_type_name);
        if (print_str == 'DELETE') {
		    $.ajax({
		    	type:'GET',
		    	url: 'index.php?c=setting&a=delete&business_type_id='+ business_type_id ,
		    	dataType:'json',
		    	success: function() {
					that.parents(".set_website").remove();
		    	}
		    })
        }
	});//点击删除时，需要手动输入指定的字符。做出判断后方可执行ajax,实现删除功能。