以下代码使我能够删除动态添加的tinymce文本框。不幸的是它只适用于jquery verions 1.8.1。我当前的项目使用的是1.12.4版。我需要在以下代码中进行哪些更改才能使其与1.12.4版一起使用？
$(document ).ready(function() {
$('a.add-type').off('click').on('click', function(e) {
e.preventDefault();
var content = jQuery('#type-container .type-row'),
element = null;
for(var i = 0; i<1; i++){
element = content.clone();
var divId = 'id_'+jQuery.now();
element.attr('id', divId);
element.find('.remove-type').attr('targetDiv', divId);
element.find('.tinymce-enabled-message-new').attr('id', 'txt_'+divId);
element.find('input:checkbox').attr('id', 'md_checkbox_'+divId);
element.find('label').attr('for', 'md_checkbox_'+divId);
element.appendTo('#type_container');
}
});
jQuery(".remove-type").off('click').on('click', function (e) {
var didConfirm = confirm("Are you sure You want to delete");
if (didConfirm == true) {
var id = jQuery(this).attr('data-id');
var targetDiv = jQuery(this).attr('targetDiv');
jQuery('#' + targetDiv).remove();
// }
return true;
} else {
return false;
}
});
});
这是html代码
<h1>Simple Example of dynamically add and remove Tinymce 4</h1>
<a class="add-type btn btn-primary pull-right" href="javascript: void(0)" tiitle="Click to add more"> Add More TextArea</a>
</div>
<div id="type_container">
<div class="row" id="edit-0">
<label for="username" class="control-label">
Description :
</label>
<br>
<textarea class="tinymce-enabled-message" cols="80" id="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo.</textarea>
<br>
</div>
</div>
</div>
<div id="type-container" class="hide">
<div class="type-row" id="">
<label for="username" class="control-label">
Description :
</label>
<br>
<textarea class="tinymce-enabled-message-new" cols="90" rows="10" id="">Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida.</textarea>
<a class="remove-type pull-right" targetDiv="" data-id="0" href="javascript: void(0)">delete</a>
<br>
</div>
</div>
答案 0 :(得分：1)
评论后更新了答案：
这是一个工作片段，我在代码中留下了评论。
for (int i = 0; i < list.size(); i++) {
Marker marker;
marker = gMap.addMarker(new MarkerOptions().position(new LatLng(list.getLat(), list.getLng()))
.icon(BitmapDescriptorFactory.fromResource(R.mipmap.location_other))
.flat(true));
}
// I removed document ready because it's useless: your events are binded to elements.
$('a.add-type').off('click').on('click', function(e) {
e.preventDefault();
var content = jQuery('#type-container.hide .type-row'),
element = null;
for (var i = 0; i < 1; i++) {
element = content.clone();
var divId = 'id_' + jQuery.now();
// These below are useless if you use my suggestion on click
// element.attr('id', divId);
// element.find('.remove-type').attr('targetDiv', divId);
// element.find('.tinymce-enabled-message-new').attr('id', 'txt_' + divId);
// I don't know what you're doing with your "md_checkbox_…", so I didn't change the below lines.
element.find('input:checkbox').attr('id', 'md_checkbox_' + divId);
element.find('label').attr('for', 'md_checkbox_' + divId);
element.appendTo('#type_container');
}
// Here, we bind (or rebind) the on click for the delete buttons, because there is a newly created one.
jQuery(".remove-type").off('click').on('click', function(e) {
if (confirm("Are you sure you want to delete?")) {
//var id = jQuery(this).attr('data-id');
//var targetDiv = jQuery(this).attr('targetDiv');
//jQuery('#' + targetDiv).remove();
// If your html structure is always the same,
// here is a suggestion instead of all the above complicated code
jQuery(this).parent().remove();
return true;
}
return false;
});
});.hide {
display: none;
}
这是否按您的意愿工作？
无论如何，希望它有所帮助。
⋅
⋅
⋅
旧答案（评论前）：
据我所知，这是一个工作片段。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<!-- There were 2 unused closing div tags in your code -->
<h1>Simple Example of dynamically add and remove Tinymce 4</h1>
<a class="add-type btn btn-primary pull-right" href="javascript: void(0)" title="Click to add more"> Add More TextArea</a>
<div id="type_container">
<div class="row" id="edit-0">
<label for="username" class="control-label">Description :</label>
<br>
<textarea class="tinymce-enabled-message" cols="80" id="description1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt est ac dolor condimentum vitae laoreet ante accumsan. Nullam tincidunt tincidunt ante tempus commodo.</textarea>
<br>
</div>
</div>
<div id="type-container" class="hide">
<div class="type-row" id="">
<label for="username" class="control-label">Description :</label>
<br>
<textarea class="tinymce-enabled-message-new" cols="90" rows="10" id="foo">Duis rutrum, magna non lacinia tincidunt, risus lacus tempus ipsum, sit amet euismod justo metus ut metus. Donec feugiat urna non leo laoreet in tincidunt lectus gravida.</textarea>
<a class="remove-type pull-right" targetDiv="foo" data-id="0" href="javascript: void(0)">delete</a>
<br>
</div>
</div>
</body>jQuery(".remove-type").off('click').on('click', function(e) {
if (confirm("Are you sure you want to delete?")) {
var id = jQuery(this).attr('data-id');
console.log(id); // for testing purpose
var targetDiv = jQuery(this).attr('targetDiv');
jQuery('#' + targetDiv).remove();
return true;
}
return false;
});
如果要添加或修改某些内容，请发表评论 如果您认为在回答时我们没有收到的内容，请更新您的问题。
请注意，在此回答中，<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<a class="remove-type btn btn-danger waves-effect pull-right" targetDiv="foo" data-id="0" href="javascript: void(0)"><i class="material-icons">delete foo</i></a>
<br>
<br>
<textarea id="foo" rows="4" cols="50">foo textarea</textarea>
</body>属性需要先使用相同的名称与targetDiv textarea一起插入。
希望它有所帮助。
答案 1 :(得分：0)
Html代码：
<a class="remove-type btn btn-danger waves-effect pull-right" targetDiv="testDiv" data-id="0" href="javascript: void(0)"><i class="material-icons">delete</i></a>
<div id="testDiv">test</div>
在最新的jQuery版本代码中：
jQuery(".remove-type").off('click').on('click', function (e) {
var didConfirm = confirm("Are you sure You want to delete");
if (didConfirm == true) {
var id = jQuery(this).data('id');
var targetDiv = jQuery(this).data('targetDiv');
jQuery('#' + targetDiv).remove();
return true;
} else {
return false;
}
});
使用jQuery函数.data('< attribute-name >')来访问自定义属性。
在链接下方了解更多信息。