Adding and Removing Attributes of Elements in Iframe
I am trying to give elements on a page inside of an iframe a temporary ID if they don't already have one when they are clicked. I was able to add a temporary ID but I cannot remove it and give it to another element when it is clicked. The following are sample markup and the code I have used to give each element a temporary ID if it didn't already have one when clicked.
- <div>
- <p> Sample1</p>
- <div> Sample2 </div>
- <span> Sample3 </span>
- </div>
- var myTarget ;
- var targetID ;
- var modifiedElement ;
- $('#myiframe').load(function () {
- $(this).contents().find("body").on('click', function (event) {
- myTarget = $(event.target);
- targetID = myTarget.attr("id");
-
- if (modifiedElement == "modElement") {
- $(modifiedElement).removeAttr("contenteditable");
- $(modifiedElement).removeAttr("id");
- }
-
- //Check if clicked element has the contenteditable attribute
- if (myTarget.attr('contenteditable') == undefined) {
- myTarget.attr('contenteditable', 'true');
-
- //Check if clicked element has an id
- if (targetID == undefined) {
- myTarget.attr("id", "modElement");
- modifiedElement = "modElement";
- }
- else {
- modifiedElement = targetID;
- }
- };
- })
- })
Please point out why the method above is not working. Thanks in advance.